2

Resulta de que necesito una tabla que me funcione como formulario, es decir que en la tabla deben ir campos que se llenarán con datos, no se imprimirá nada. Necesito dos botones de eliminar y agregar fila, Ya tengo ese código pero hay un problema en uno de los campos del formulario que esta en la tabla, hay un select ese select tiene código php, y para agregar ese select cuando le doy click al boton agregar fila, no me lo permite ya que es codigo php dentro de javascript, que puedo hace para solucionarlo?

Aqui esta mi tabla(la parte del php)

  </thead>
                <tbody>
                  <tr>
                    <td> <input class="form-control mr-sm-2 col-12" type="text" name="codigo" id="codigo"> </td>
                    <td><input class="form-control mr-sm-2 col-12" type="text" name="nombre" id="nombre"> </td>
                    <td>
                    <select class="col-12 form-control mr-sm-2 " name="unidad_medida">
                    <?php
                    while($datos = mysqli_fetch_array($consulta_u_medida)){ //array recorre datos                               
                      ?>
                    <option value="<?php echo $datos['codigo']?>"> <?php echo $datos['nombre'] ?>  </option>
                    <?php } ?> 
                    </select>
                      </td>
                      <td><input class="form-control mr-sm-2 col-12" type="text"  name="cantidad"> </td>
                      <td><input class="form-control mr-sm-2 col-12" type="date"  name="fecha_vencimiento"></td>
                      <td><input class="form-control mr-sm-2 col-12" type="text" name="precio_unitario" > </td>
                      <td><input class="form-control mr-sm-2 col-12" type="text" name="precio_total"> </td>
                  </tr>             
                </tbody>

Aqui esta el script que hace funcionar a los botones agregar y eliminar fila


    <script>
      var myTable = document.querySelector("table"); 
       function agregarFila(){ 
        var row = myTable.insertRow(myTable.rows.length);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        var cell7 = row.insertCell(6);
        cell1.innerHTML = '<input class="form-control mr-sm-2 col-12" type="text" name="codigo" id="codigo">';
        cell2.innerHTML = '<input class="form-control mr-sm-2 col-12" type="text" name="nombre" id="nombre">';;
        cell3.innerHTML = ' <select class="col-12 form-control mr-sm-2 " name="unidad_medida">
                              <?php
                              while($datos = mysqli_fetch_array($consulta_u_medida)){ //array recorre datos                               
                                ?>
                            <option value="<?php echo $datos['codigo']?>"> <?php echo $datos['nombre'] ?>  </option>
                            <?php } ?> 
                            </select>';;
                                    
        cell4.innerHTML = '<input class="form-control mr-sm-2 col-12" type="text"  name="cantidad">';;
        cell5.innerHTML = '<input class="form-control mr-sm-2 col-12" type="text" name="precio_unitario"';;
        cell7.innerHTML = '<input class="form-control mr-sm-2 col-12" type="text" name="precio_total"';;
        }
  
       function eliminarFila(){
        var rowCount = myTable.rows.length;
        if(rowCount <= 1) {
          alert('No se puede eliminar el encabezado');
        } else {
          myTable.deleteRow(rowCount -1);
        }
    
       }
    </script>
4
  • PHP se ejecuta en el servidor. JavaScript en el cliente. Un navegador es un cliente, nunca va a poder interpretar php. Una vez que la página está carga, tan solo javascript va a poder modificarla, ya no hay más php.
    – Benito-B
    Commented el 19 ago. 2020 a las 20:58
  • Te faltan cerrar los tags en cell5 y cell6
    – Marcos
    Commented el 19 ago. 2020 a las 21:18
  • Sería más conveniente tener una tabla oculta con contenido por defecto y simplemente la clonas cuando necesites agregar una fila. Revisa esta respuesta, solo quita la parte correspondiente a select2
    – Triby
    Commented el 19 ago. 2020 a las 21:40
  • Quizás utilizando datatables , se genera la tabla , se rellena con los datos desde tu consulta y colocas los botones en las celdas que necesites. te dejo la pagina de soporte de esta datatables.net/examples/styling/bootstrap4
    – Cesarin
    Commented el 19 ago. 2020 a las 22:08

1 respuesta 1

0

Problema:

El problema es que estas usando comillas simples (') para generar una cadena "multi-línea" y Javascript esto no se puede hacer así.

Demo:

let multiLineStr = 'Hola 
  mundo';
  
console.log(multiLineStr)
  


Solución:

Para crear cadenas "multi-línea" podes:

  • Escapar (\) el salto de línea al final de la cadena

let multiLineStr = 'Hola \
  mundo';
  
console.log(multiLineStr)
  

let multiLineStr = `Hola 
  mundo`;
  
console.log(multiLineStr)
  


Caso específico:

En tu caso (y solo si el script este en un archivo PHP), usando plantillas de cadena, podrías hacerlo así:

//... código anterior
cell3.innerHTML = `<select class="col-12 form-control mr-sm-2 " name="unidad_medida">
                     <?php while($datos = mysqli_fetch_array($consulta_u_medida)){ ?>
                     <option value="<?php echo $datos['codigo']?>"><?php echo $datos['nombre'] ?></option>
                     <?php } ?> 
                   </select>`;
3
  • Para el que puso el -1, aca le dejo una demo
    – Marcos
    Commented el 21 ago. 2020 a las 13:26
  • Muchisimas Gracias! ya funcionó pero el codigo php no se ejecuta aun dentro del javascript incluso cuando el archivo esta en extensión php
    – Karol
    Commented el 24 ago. 2020 a las 20:10
  • @KAROLYULIETHPACHECORODRIGUE, supongamos que un archivo index.php contiene HTML, CSS (<style>) y JS (<script>); PHP se compila en el servidor y el resultado es devuelto al cliente (el navegador) quien es el que realmente interpreta el resultado. Si no te anduvo es por alguna otra razón.
    – Marcos
    Commented el 24 ago. 2020 a las 22:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.