1

Para hacer el código que mostraré me basé en la respuesta de esta pregunta Agregar filas a Tabla con JavaScript, DOM

ahora mostraré mi código:

este archivo se llama botones.js

function agregarFila(){
    document.getElementById("tabla").insertRow(-1).innerHTML = '<td></td><td></td><td></td><td></td><td></td><td></td><td></td>';
  }
  
  function eliminarFila(){
    var table = document.getElementById("tabla");
    var rowCount = table.rows.length;
    //console.log(rowCount);
    
    if(rowCount <= 1)
      alert('No se puede eliminar el encabezado');
    else
      table.deleteRow(rowCount -1);
  }

redireccioné el archivo asi:

<script src="../bootstrap/js/botones.js"></script> 

Este es un codigo html de prueba

<html>
    <head>
        <script src="../bootstrap/js/botones.js"></script>
    </head>
    <body>
        <button type="button" class="btn btn-primary  rounded-pill" onclick="eliminarFila()"> Eliminar fila</button> 
        <button type="button" class="btn btn-primary  rounded-pill" onclick="agregarFila()"> Agregar fila</button> 
        <table class="table">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row"> <input type="text" value="akdk">   </th>
                <td><input type="text" value="akdk">  </td>
                <td><input type="text" value="akdk">  </td>
                <td><input type="text" value="akdk">  </td>
              </tr>             
            </tbody>
          </table>
    </body>
</html>
3
  • 1
    podrias agregar tu codigo html y js solamente con un ejemplo minimo verificable ya que contiene codigo php y no esta muy claro lo que deseas agregar filas que se puedan rellenar con datos o como?
    – Bryro
    el 18 ago. 2020 a las 13:47
  • Con ese código agregas filas vacías y siempre eliminas la última. ¿Cuál es el problema que tienes?
    – Triby
    el 18 ago. 2020 a las 14:59
  • Ya hice un arreglo, espero que asi se entienda, cabe aclarar que en mi tabla no quiero que se impriman datos, quiero llenar datos, por eso los inputs dentro de las filas.
    – Karol
    el 18 ago. 2020 a las 16:35

1 respuesta 1

0

Si quieres tener input dentro de las celdas de las nuevas filas, esta es una manera:

Solo agregando el input a cada una de las celdas que se asignen a la fila.

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);
        cell1.innerHTML = '<input type="text">';
        cell2.innerHTML = '<input type="text">';;
        cell3.innerHTML = '<input type="text">';;
        cell4.innerHTML = '<input type="text">';;
       }
  
       function eliminarFila(){
        var rowCount = myTable.rows.length;
        if(rowCount <= 1) {
          alert('No se puede eliminar el encabezado');
        } else {
          myTable.deleteRow(rowCount -1);
        }
    
       }
 <html>
        <head>        
        </head>
        <body>
            <button type="button" class="btn btn-primary  rounded-pill" onclick="eliminarFila()"> Eliminar fila</button> 
            <button type="button" class="btn btn-primary  rounded-pill" onclick="agregarFila()"> Agregar fila</button> 
            <table class="table">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row"> <input type="text" value="akdk">   </th>
                    <td><input type="text" value="akdk">  </td>
                    <td><input type="text" value="akdk">  </td>
                    <td><input type="text" value="akdk">  </td>
                  </tr>             
                </tbody>
              </table>
     </body>
    </html>

Modifiqué el ejemplo que pusiste de esta manera: al limpiar el php quitaste cosas como el id de la tabla, de todas formas con querySelector puedes obtener el objeto, en la función insertar fila utilizó la misma función insertRow que usas con índice de longitud para que se agregue abajo de las otras filas, y para las celdas que se agregan están a continuación las 4 porque son para 4 columnas y a cada una le agrego el input tipo text con innerHTML y quede como la fila que se muestra al inicio. Para la función eliminar fila usó el length-1 para ir eliminando desde abajo.

Si necesitas agregar codigo php a las celdas puedes incluirlo así:

cell1.innerHTML = '<?php $txt = "PHP";
echo "this is $txt!"; ?>';
3
  • porfavor me explica el codigo js?
    – Karol
    el 18 ago. 2020 a las 20:55
  • Modifiqué el ejemplo que pusiste de esta manera: al limpiar el php quitaste cosas como el id de la tabla, de todas formas con querySelector puedes obtener el objeto. en la función insertar fila utilizo la misma función insertRow que usas con indice de longitud para que se agregue abajo de las otras filas, y para las celdas que se agregan estan a continuación las 4 porque son para 4 columnas y a cada una le agrego el input tipo text con inner HTML y quede como la fila que se muestra al inicio. Para la función eliminar fila uso el length - 1 para ir eliminando desde abajo.
    – Ange Reyna
    el 18 ago. 2020 a las 21:07
  • ya veo.. pero en mi formulario real, yo tengo un select en un td y ese select tiene php, como hago para que eso me funcione con tu codigo ? yo intente poner todo eso como tu hiciste con los inputs pero me suelta errores asumo que de sintaxis.
    – Karol
    el 18 ago. 2020 a las 21:14

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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