Foros del Web » Programación web » Javascript »

Agregar nueva fila a tabla con js

Estas en el tema de Agregar nueva fila a tabla con js en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/09/2008, 20:46
Avatar de hgp147  
Fecha de Ingreso: diciembre-2006
Ubicación: Buenos Aires, Argentina
Mensajes: 979
Antigüedad: 7 años, 10 meses
Puntos: 36
Agregar nueva fila a tabla con js

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.
__________________
Spread Firefox | Download Day 2008
¡Únete en nuestra misión para alcanzar el Record Guinness al software más descargado en 24 horas! http://www.spreadfirefox.com/es-ES/worldrecord/
  #2 (permalink)  
Antiguo 12/09/2008, 10:51
Avatar de jseros  
Fecha de Ingreso: agosto-2008
Ubicación: Bogotá
Mensajes: 218
Antigüedad: 6 años, 3 meses
Puntos: 18
Respuesta: Agregar nueva fila a tabla con js

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.
  #3 (permalink)  
Antiguo 12/09/2008, 15:00
Avatar de hgp147  
Fecha de Ingreso: diciembre-2006
Ubicación: Buenos Aires, Argentina
Mensajes: 979
Antigüedad: 7 años, 10 meses
Puntos: 36
Respuesta: Agregar nueva fila a tabla con js

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

Agradezco mucho tu ayuda.
__________________
Spread Firefox | Download Day 2008
¡Únete en nuestra misión para alcanzar el Record Guinness al software más descargado en 24 horas! http://www.spreadfirefox.com/es-ES/worldrecord/
  #4 (permalink)  
Antiguo 12/09/2008, 19:12
Avatar de hgp147  
Fecha de Ingreso: diciembre-2006
Ubicación: Buenos Aires, Argentina
Mensajes: 979
Antigüedad: 7 años, 10 meses
Puntos: 36
Respuesta: Agregar nueva fila a tabla con js

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
__________________
Spread Firefox | Download Day 2008
¡Únete en nuestra misión para alcanzar el Record Guinness al software más descargado en 24 horas! http://www.spreadfirefox.com/es-ES/worldrecord/

Última edición por hgp147; 12/09/2008 a las 19:22
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:28.
SEO by vBSEO 3.3.2