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.

Advertisements

26 thoughts on “Añadir/Eliminar filas dinámicamente en html con javascript

    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. 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. EXCELENTE APORTE ME SIRVIO MUCHISIMO …UNA BUENA ALTERNATIVA A HANDLERS Y VIEWSTATE …GRACIAS

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

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

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

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

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

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

Leave a 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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s