Agregar nueva fila a tabla con js

[hgp147]

Hola, tengo un problema con un script que saque de una web y que lo estoy modificando, acá pueden ver como es http://hgp147.110mb.com/index.php . Cuando clickeo en Agregar, se agrega una nueva fila; el problema es que si toco el link donde dice Columna1 (2,3 ó4), al ordenarlo me desaparece la fila que agregue.

Muchas gracias.

[jseros]

hola hgp147.

Modifique el código de la función transformar y me funcionó:

Código:

function transformar() {
  
  
	// Obtengo la tabla
    var tabla = document.getElementById("tabla");
    
	// Almaceno y modifico la cabecera, a�adiendo el orden y el filtro
	var cab = tabla.rows[0];
	
	if( !datos.length || !datos2.length )
	{
		for (var i=0; i<cab.cells.length; i++) {
			cabecera[i] = cab.cells[i].innerHTML;
			cab.cells[i].innerHTML = (i != seleccionado) ?
				'<a href="javascript:ordenar('+i+')">'+cab.cells[i].innerHTML+'<img src="ord-no.gif" alt="NO" /></a>' :
				(orden[i]? '<a href="javascript:ordenar('+i+')">'+cab.cells[i].innerHTML+'<img src="ord-des.gif" alt="DES" /></a>' :
						   '<a href="javascript:ordenar('+i+')">'+cab.cells[i].innerHTML+'<img src="ord-asc.gif" alt="ASC" /></a>');
			cab.cells[i].innerHTML += '<br /><input type="text" id="filtro'+i+'" class="filtro" maxlength="10" onkeyup="filtro(event, '+i+')" value="'+filtros[i]+'" autocomplete="off"/>';
		}
	}
	else
	{
		datos = [];
		datos2 = [];
	}

	// Guardo los datos de la tabla y marco filas alternas
    for (var i=1; i<tabla.rows.length; i++) {
      if (i%2 == 0) {
        tabla.rows[i].className = "par";
	  }
	  var aux = new Array();
	  var aux2 = new Array();
	  for (var j=0; j<tabla.rows[i].cells.length; j++) {
	    aux[j] = tabla.rows[i].cells[j].innerHTML;
	    aux2[j] = tabla.rows[i].cells[j].id;
	  }
	  datos[datos.length] = new Array(true, aux);
	  datos2[datos2.length] = new Array(true, aux2);
    }
  }

y la función ordenar:

Código:

  function ordenar(i) {
    var tabla = document.getElementById("tabla");
	
	transformar();
	
	// si es la misma col se cambia el sentido
	if (seleccionado == i) {
		orden[seleccionado] = !orden[seleccionado];
	} else {
		orden[seleccionado] = true;
		seleccionado = i;
	}
	
	// Se ordena la tabla y se dibuja
	datos.sort(organizar);
	datos2.sort(organizar);
	dibujarTabla();
  }

Lo que está en rojo fue lo que agregué o cambié

No me gusta mucho ese código, creo que está muy desordenado y hay cosas sin sentido, pero bueno:

1. dos arreglos llamados datos y datos2 que almacenen los datos que se encuentran en el momento en la tabla.

2. estos arreglos se llenan en la función transformar. Esta función solo se ejecuta en el
evento onload, luego con la función ordenar se redibuja la tabla con respecto a los datos que se encuntren en los arreglos. Osea, los que se encontraban cuando se cargo el sitio.

3. Por ello en la función ordenar, puse una llamada a la función transformar, para poder volver a almacenar los datos.

4. En esta última se crean las cabeceras de la fila, es por esto que pongo un verificación del estado de los arreglos, si no hay datos crea las cabeceras y si los hay no crea nada pero reinicia los arreglos. Si no fuera así, cada vez que intente ordenar las columas me adjunta una cebecera.

Espero haberme hecho entender.

Saludos.

[hgp147]

Muchas gracias jseros!! Tu código funciona perfecto.

Agradezco mucho tu ayuda.

[hgp147]

Hola, estoy tratando también de guardar el id del TR, pero no logre hacerlo. Sucede lo mismo que en el caso anterior, al presionar donde dice Columna 1 (2,3 ó 4) pierdo el valor del ID; trate varias formas de realizarlo pero ninguna funciona correctamente. (Este: http://hgp147.110mb.com/index.php tiene corregidos los errores mencionados por jseros; y este otro http://hgp147.110mb.com/index.1.php es el que realice algunos cambios para intentar resolver el problema recien mencionado). Espero que puedan ayudarme.

Muchas gracias