Añadir/Eliminar filas dinámicamente en html con javascript

Este es un código encontrado por la red para añadir/eliminar filas en una tabla HTML dinámicamente mediante Javascript.

No soy muy amante de JavaScript y menos con algunas librerías como YUI que me han dado muchos problemas, pero algunso trucos como este me han facilitado la vida. Aquí va unos de ellos:

<html>
<HEAD>
<TITLE>Anyadir Filas Dinámicamente en HTML by jotaerre.net</TITLE>
<SCRIPT language="javascript">
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);

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);
}
}

</SCRIPT>
</HEAD>
<BODY>

<INPUT type="button" value="Add Row" onclick="addRow('dataTable');" />

<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable');" />

<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" NAME="chk"/></TD>
<TD> <INPUT type="text" /> </TD>
</TR>
</TABLE>

</BODY>
</html>

Nada, solo tienes que hacer cut+paste y a disfrutar.

Suerte. Jr.

24 comentarios en “Añadir/Eliminar filas dinámicamente en html con javascript

    • Hola Enderog63,

      Gracias por tu comentario.
      En este pos solamente quería tener presente la parte cliente, pero tomo nota de tu petición.
      Enjoy!!!

      • Gracias.. Excelente.. Me sirve mucha ayuda para la tesis. Ahora tengo que averiguar como se almacenan en la base de datos los distintos registros.. ;D

  1. Gracias me sirvio de mucho tu codigo, me sirvio de base para ademas poder enviar mis datos obtenidos a una base de datos postgres.

  2. esta fino muchas gracias pero una pregunta cuando trato de que varios registro se muestren en cada fila que agrego no se muestra solo en la primera me explico

  3. Muchas gracias me sirvió de ayuda pero cuando tenga varias filas y después introducirla a una base de datos como se puede hacer.

    • Hola Alejandra, me alegro que te ayude el ejemplo. Por otro lado no he probado el cambio de estilo en td. Lamento no poderte contestar a eso.

  4. Some really nice and useful information on this web site, also I conceive the style and design holds superb features. begafddkaekd

  5. Im genuinely enjoying the style and layout of one’s website. Its a very uncomplicated on the eyes which makes it a great deal much more enjoyable for me to come here and pay a visit to far more typically. Did you hire out a designer to make your theme? Excellent perform! kkcccebgfkgg

  6. es muy bueno tu ejemplo:).. pero mi pregunta es para poder acceder a una celda? como sería el codigo
    for(var i=0; i<=rowCount; i++){
    total=parseFloat(total)+parseFloat(document.getElementById('dataTable').rows[i+1].cells[4].innerHTML );
    }
    yo puse algo asi .. la tabla tiene 5 colimnas y lo que hace este for es sumar .. pero marca error
    Uncaught TypeError: Cannot read property 'cells' of undefined

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s