Bien, encontré una mejor forma de hacerlo ... con DOM.
Insertar una nueva fila en una tabla (destino) es fácil, sólo es establecer donde se quiere e insertarla.
var nuevo_indice = destino.rows.length;
fila = destino.insertRow(nuevo_indice);
Después es necesario especificar el contenido de las celdas, para el ejemplo, un checkbox y dos valores de texto.
celda = fila.insertCell(0);
valor = document.createElement("input");
valor.type = "checkbox";
valor.id = "marca";
valor.name = "marca";
valor.value = nuevo_indice;
celda.appendChild(valor);
celda = fila.insertCell(1);
valor = document.createTextNode(nombres + " - " + nuevo_indice);
celda.appendChild(valor);
celda = fila.insertCell(2);
valor = document.createTextNode(apellidos);
celda.appendChild(valor);
Para remover las filas obtengo una referencia a los elementos que sean input y pertenezcan a la tabla.
var inputs = origen.getElementsByTagName("input");
Después filtro los que sean checkbox y sean los que me interesan (id='marca'). Los almaceno en un arreglo.
for (i=0; i<inputs.length; i++)
{
if (inputs[i].type == "checkbox" &&
inputs[i].id == "marca" &&
inputs[i].checked)
{
checkboxes[chk_cuenta] = inputs[i];
chk_cuenta ++;
}
}
Después de filtrados procedo a eliminarlos.
for (i=0; i<checkboxes.length; i++)
{
origen.deleteRow(checkboxes[i].value - 1*i);
}
En este punto encontré un serio problema. El value de los checkboxes seleccionados me indica cuales son las filas que deseo remover, pero después de remover la primera de ellas la continuidad de las filas se altera ya que se eliminó un elemento. Para compensar esto se disminuye 1*i el índice de la fila, siendo 0 para el primer caso cuando no se ha alterado, 1 cuando se ha removido una fila y así sucesivamente.
La solución anterior soluciona el problema durante un procedimiento de eliminación de filas, sin embargo al terminar la tabla queda con sus índices alterados y por consiguiente va a fallar la siguiente eliminación y posiblemente la adición de filas también va a ser confusa. Para esto tuve que corregir los índices de las filas tan pronto como se termina la remoción.
for (i=0; i<inputs.length; i++)
{
if (inputs[i].type == "checkbox" &&
inputs[i].id == "marca")
{
inputs[i].value = i + 1;
}
}
El archivo fuente del ejemplo se puede descargar del siguiente enlace: test_inner2.html
Tags: HTML, JavaScript
Loading ...
