0

Una consulta, quisiera saber como puedo agregar una fila de campos de texto de una tabla al presionar un botón.

Aquí el código html de la tabla.

<table class="table-condensed table-responsive table-hover" id="row0">
                 <tr>
                     <th class="btn-info">Origen</th>
                     <th class="btn-info">Destino</th>
                     <th class="btn-info">Iata</th>
                     <th class="btn-info">Vuelo</th>
                     <th class="btn-info">Fecha</th>
                     <th class="btn-info">Piezas</th>
                     <th class="btn-info">Peso</th>
                     <th class="btn-info">Volumen</th>
                     <th class="btn-info">Acción</th>

                 </tr>
                 <tr>
                     <td>

                     </td>
                 </tr>

    </table>
    <input type="button" name="btnaddrow" class="btn-primary" value="+" onclick="addRow('row0');">
    <input type="button" name="btndelete" class="btn-danger"value="-" onclick="deleteRow('row0');">

Aquí el Código javascript del archivo js "tablaDinamica".

function addRow(tableID) {

           var table = document.getElementById(tableID);
           var rowCount = table.rows.length;
           var row = table.insertRow(rowCount);
           var cell1 = row.insertCell(0);
           var element1 = document.createElement("input");
           var element2 = document.createElement("input");
           element1.type = "checkbox";
           cell1.appendChild(element1);


           var cell2 = row.insertCell(1);
           var element2 = document.createElement("input");
           element2.type = "text";
           cell2.appendChild(element2);

      }

      function deleteRow(tableID) {

           try {

           var table = document.getElementById(tableID);
           var rowCount = table.rows.length;

           for(var i=0; i<rowCount; i++) {

                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];

                if(null != chkbox && true == chkbox.checked) {

                     table.deleteRow(i);
                     rowCount--;
                     i--;
                }
           }
           }catch(e) {
                alert(e);
           }

      }

El Código funciona bien , el problema es que solo me agrega un campo de texto y descuadrado de la tabla, y quisiera saber como puedo agregar una fila completa de campos input en la tabla al presionar el botón "+" y lo mismo cuan do presiono el botón "-" para eliminar la fila. acá la imagen de como agrega la fila. introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

1 respuesta 1

1

Puedes intentar algo como esto: Le he agregado un ciclo for para que de esa manera los inputs se generen en función de la cantidad de campos que quieres llenar en este caso 8. De igual manera con "style.width" del input creado puedes manipular el tamaño de tu input.

 function addRow(tableID) {

           var table = document.getElementById(tableID);
           var rowCount = table.rows.length;
           var row = table.insertRow(rowCount);
           var cell1 = row.insertCell(0);
           var element1 = document.createElement("input");
           element1.type = "checkbox";
           cell1.appendChild(element1);          

  for(var i = 0;i < 8;i++){
           var element2 = document.createElement("input");
           var cell2 = row.insertCell(1);
           var element2 = document.createElement("input");
           element2.type = "text";  
           //aquí puedes controlar el tamaño del input
           element2.style.width="5 rem";
           cell2.appendChild(element2);
  }
3
  • Amigo, por favor explica un poco en que consiste tu método mas que dar la respuesta el objetivo es enseñarles como hacerlo. Muchas gracias. el 10 sep. 2018 a las 17:42
  • lo que necesito es que al presionar el botón se agregue una fila de la tabla con sus campos input text para ingresar datos y necesito que al tener seleccionada filas con el checkbox, al presionar el botón eliminar, se elimine la fila seleccionada y sus campos de texto. Actualmente funciona pero no he logrado que se agregue una fila completa de la tabla con sus campos de texto solo se agrega un solo campo de texto pero no una fila de la tabla. Probé con el código que me indicaste pero no me sirvió. el 11 sep. 2018 a las 19:00
  • Hola me sirvió el código ahora me genera los input y también corregí el tamaño de los input. el 19 oct. 2018 a las 18:31

Tu Respuesta

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

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