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.

27 comments

  1. Hola,

    muchas gracias por compartir esta info…. me fue de mucha ayuda :D:D:D:D

    saludos!!!

  2. gracias …..

  3. pedro · · Reply

    Muchas gracias…

  4. Luis · · Reply

    excelente ejemplo mi amigo

  5. Excelente aporte, seria interesante que subieras el script enviando la informacion a mysql.
    Se agradeceria.

  6. Excelente aporte amigo.
    Seria interesante ver como almacenas la información a una base de datos en mysql

    1. 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!!!

      1. Franco B. · ·

        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

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

  8. Excelente amigo, muchos gracias por el ejemplo, muy fácil de entender

  9. 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

  10. ritexmexdex · · Reply

    EXCELENTE APORTE ME SIRVIO MUCHISIMO …UNA BUENA ALTERNATIVA A HANDLERS Y VIEWSTATE …GRACIAS

  11. 3156939623 · · Reply

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

  12. Alfredo · · Reply

    Excelente, bien jugado… gracias.

  13. Alejandra · · Reply

    excelente ejemplo, una pregunta, para adicionar un estilo a el td que se crea al crear una nueva linea, como se hace?

    1. 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.

  14. igor · · Reply

    BRAAAAAAAAAAAAAAVVVVVVVVVVVVVOOOOOOOOOOOOO 🙂 🙂 🙂

  15. Johnf507 · · Reply

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

  16. Johnd284 · · Reply

    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

  17. oscar · · Reply

    Excelente, ahora como conecto con php o jsp y una bd postgres?

  18. paulina · · Reply

    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

  19. Itzae · · Reply

    Me sale la tabla is null 😥

  20. BARCELONA · · Reply

    MUY BUEN EJEMPLO PERO SERIA BUENO QUE SE PUDIERA JALAR INFORMACION DE MYSQL

  21. victor · · Reply

    maestro!!!

  22. Eduardo Chimal Moctezuma · · Reply

    Como puedo imprimir los valores en otra tabla o en otro archivo?

  23. JaneB · · Reply

    me sale el siguiente error: Type error : Cannot read property ‘childNodes’ of undefined como puedo arreglarlo?

  24. Javier · · Reply

    Hola buenas, alguien podria modificarlo para que añadiese columnas tambien?
    Muchas gracias

Leave a Reply to paulina Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: