Manipular tablas con el DOM

sergiopdlt · #1 (**permalink**) 04/12/2008, 21:59

Cómo les va,
encontré este pequeño ejemplo en el foro al cual le adicioné la función addtr()
para probar añadir filas a una tabla. La cuestión es que la función sí añade la
fila que le indico pero no muestra los texto que pongo que son "Hiru 2"
y "Lo Logré"....... Podría decirme alguien por favor, qué falta.

<html>
<head>
<script type="text/javascript">
//<script type="text/javascript" src="main2.js">

function remove(t)
{
var td = t.parentNode;
var tr = td.parentNode;
var table = tr.parentNode;
table.removeChild(tr);
}

function addtr(t)
{
var tabla = document.getElementById('miTabla');
// Insertar la tercera fila
tabla.tBodies[0].insertRow(2);
tabla.tBodies[0].rows[2].insertCell(1);
tabla.tBodies[0].rows[2].cells[1].innerHTML = "Hiru 2";
tabla.tBodies[0].rows[2].insertCell(2);
tabla.tBodies[0].rows[2].cells[2].innerHTML = "Lo Logré";
document.body.appendChild(tabla);
}

</script>
</head>
<body>
<table id="miTabla">
<tr>
<td>Bat</td>
<td><input type="button" onclick="remove(this)" value="Eliminar" /></td>
</tr>
<tr>
<td>Bi</td>
<td><input type="button" onclick="remove(this)" value="Eliminar" /></td>
</tr>
<tr>
<td>Hiru</td>
<td><input type="button" onclick="remove(this)" value="Eliminar" /></td>
</tr>
<tr>
<td>H</td>
<td><input type="button" onclick="addtr()" value="Adicionar" /></td>
</tr>

</table>
</body>
</html>

ZiTAL · #2 (**permalink**) 05/12/2008, 01:07

no puedes hacer un innerHTML antes de hacer el appendChild, cambia esto:

tabla.tBodies[0].rows[2].cells[1].innerHTML = "Hiru 2";

por esto:

Código javascript:

Ver originalvar txt = document.createTextNode('Hiru 2');
tabla.tBodies[0].rows[2].cells[1].appendChild(txt);

o todo junto ;)

Código javascript:

Ver originaltabla.tBodies[0].rows[2].cells[1].appendChild(document.createTextNode('Hiru 2'));

caricatos · #3 (**permalink**) 05/12/2008, 01:44

Cita:

Iniciado por ZiTAL

no puedes hacer un innerHTML antes de hacer el appendChild, cambia esto:

tabla.tBodies[0].rows[2].cells[1].innerHTML = "Hiru 2";

por esto:

Código javascript:

Ver originalvar txt = createTextNode('Hiru 2');
tabla.tBodies[0].rows[2].cells[1].appendChild(txt);

o todo junto ;)

Código javascript:

Ver originaltabla.tBodies[0].rows[2].cells[1].appendChild(createTextNode('Hiru 2'));

Hola:

No estoy seguro, pero creo que createTextNode debe estar precedido del objeto document... si perteneciese al objeto window posiblemente se podría omitir el objeto padre...

Saludos

ZiTAL · #4 (**permalink**) 05/12/2008, 02:01

si tienes razon ahora lo cambio eso pasa por escribir y no probar :P

sergiopdlt · #5 (**permalink**) 05/12/2008, 08:31

Gracias a los dos
hice los cambios sugeridos y ya corregidos por Zital, pero sigue sin mostrar nada.
Aquí les muestro como quedó la función.

function addtr(t)
{
var tabla = document.getElementById('miTabla');
// Insertar la tercera fila
tabla.tBodies[0].insertRow(2);
tabla.tBodies[0].rows[2].insertCell(1);
tabla.tBodies[0].rows[2].insertCell(2);
//----
var txt0 = document.createTextNode('Hiru 2');
tabla.tBodies[0].rows[2].cells[1].appendChild(txt0);
// tabla.tBodies[0].rows[2].cells[1].appendChild(document.createTextNode('Hiru 2'));

//----
var txt1 = document.createTextNode('Lo Logré');
tabla.tBodies[0].rows[2].cells[2].appendChild(txt1);
// tabla.tBodies[0].rows[2].cells[2].appendChild(document.createTextNode('Lo Logré'));
//----
document.body.appendChild(tabla);

// tabla.tBodies[0].rows[2].cells[1].innerHTML = "Hiru 2";
// tabla.tBodies[0].rows[2].cells[2].innerHTML = "Lo Logré";
}