Pasar el número de td a Javascript

[Cain]

Estoy haciendo un script para mover filas de una tabla, y funciona muy bien al principio, lo malo es que el script se fía siempre del orden inicial, y no del orden actual.

Me explico, tengo esta tabla:

Código:

<table>
     <tr id=a1>
          <td id=b1>hola</td>
          <td id=c1>hola</td>
     </tr>
     <tr id=a2>
          <td id=b2>hola</td>
          <td id=c2>hola</td>
     </tr>
     <tr id=a3>
          <td id=b3>hola</td>
          <td id=c3>hola</td>
     </tr>
     <tr id=a4>
          <td id=b4>hola</td>
          <td id=c4>hola</td>
     </tr>
     <tr id=a5>
          <td id=b5>hola</td>
          <td id=c5>hola</td>
     </tr>
</table>

Uso un script como este para mover las filas:

Código:

<script>
function sube() {
     taulell.moveRow(cela, cela-1);
     moure = moure-1;
}
</script>

Donde cela es 1, 2, 3, 4 o 5 y equivale al número de <tr>.

¿Qué pasa? Que cuando muevo la fila 4 hacia arriba, la cosa queda así:

Código:

<table>
     <tr id=a1>
          <td id=b1>hola</td>
          <td id=c1>hola</td>
     </tr>
     <tr id=a2>
          <td id=b2>hola</td>
          <td id=c2>hola</td>
     </tr>
     <tr id=a4>
          <td id=b4>hola</td>
          <td id=c4>hola</td>
     </tr>
     <tr id=a3>
          <td id=b3>hola</td>
          <td id=c3>hola</td>
     </tr>
     <tr id=a5>
          <td id=b5>hola</td>
          <td id=c5>hola</td>
     </tr>
</table>

Parece correcto, pero claro, ahora cuando coja la fila a3 (orden 4) el programa moverá la fila a4 (orden3) porque se base en el id de los <td>.

¿Alguien tiene alguna idea para solucionar esto?

[caricatos]

Hola Cain:

Has probado cambiarle el id de las celdas (y tal vez de las líneas rows)...
document.getElementsByTagName('td")[n].setAttribute("id", nuevoId)...

La verdad es que yo nunca he probado cambiar el id, pero cualquier otro atributo se puede cambiar sin problema...

puedes usar getAttribute, para leer el contenido, y setAttribute para hacer asignaciones.

Saludos

[Cain]

Lo probaré, gracias

Aunque, por si no funcionara, la idea original era pasar algo así como el table.rows.index (sólo que me parece que no existe eso )

He encontrado table.rows.item(i) para seleccionar un td, ¿pero como puedo llamar una función javascript pasando la (i) correcta?

---

Ya lo he probado, y aunque seguramente hace el cambio, no me basta con eso

Muchas gracias de todas maneras, seguires intentando

[caricatos]

Hola otra vez:

Cain: La verdad es que para mi es nuevo lo de mover filas de tablas, y resulta que empecé a hacer pruebas, y en un principio no encontré nada nuevo, aunque como siempre, probé el funcionamiento en netscape, y no reconoce moveRow

Creo que a ti te importa que funcione bien en los navegadores, por eso te lo digo...

Tal vez sea mejor intercambiar el contenido de las celdas y sus atributos para compatibilizar...

Saludos

[Cain]

Tal vez sea mejor intercambiar el contenido de las celdas y sus atributos para compatibilizar...

¿Como no se me ha ocurrido antes? Muy buena idea

La verdad es que moveRow() sólo funciona con Internet Explorer, por eso no me acaba de convencer. Probaré a mover los innerHTML de las celdas en lugar de todo el <tr>. Muchas gracias por la idea

--- Post nuevo ---

Lo logré!!!!

Ahora me funciona en Internet Explorer y Mozilla. Incomprensiblemente, Netscape 7 me deja subir filas, pero no bajarlas

Seguiremos intentando

[caricatos]

Hola otra vez:

Cain: Me alegra que te funcione... y también me has dejado así , cuando me has dicho que no funciona en netscape 7...

Supongo que lo sabrás, pero te recomiendo que escribas en la línea de direcciones de netscape "javascript:" (también hay una opción similar en los menús) para que te muestre la "consola javascript" y te indique el error... Apostaría que se trata de una cosa "tonta" (es un decir)...

Si te sigue fallando, pon un enlace para chequearlo...

Saludos

[Cain]

Ya lo solventé. Era una cosa tonta, como tu habías vaticinado

En Netscape 4.5 no funciona, ni creo que funcione jamás, pero bueno, seguramente en Internet Explorer 3.0 tampoco irá

Saludos caricatos

[chalchis]

Hola amigos me interesa ver como quedaria definitivamente el
codigo que mencionan

gracias espero sus comentarios

[clinisbut]

Buenas, refloto este tema ya que quiero mover filas arriba y abajo yo también.
He probado la solución de intercambiar el innerHTML y funciona, lo que ocurre es que yo dentro de las filas tengo unos select con opciones, y al inercambiar los innerHTML cada uno de los select pierde la opción seleccionada, de manera que sí, el contenido se intercambia pero las filas movidas aparecen idénticas porque se marca la primera opción en ambos select y no me acaba de servir esta solución...

También probé modificando el valor de nextSibling y previousSibling, pero me di cuenta que son propiedades de solo lectura y ahi me fastidió todo...

[caricatos]

Hola:

Hubo otro mensaje interesante sobre quitar y poner filas de tablas: Como adiciono filas en una tabla dinámicamente...

Saludos

[clinisbut]

Buenas.
Me he leído el tema completo pero no veo que relación tiene con alterar el "orden" de las filas a voluntad... igual no lo he leído bien?

[caricatos]

Hola:

Tenía un código que pensaba que había puesto en ese mensaje, pero parece que debió ser otro... y como no puedo encontrarlo con el buscador de los foros, voy a pegar el código:

Código:

<html>
<head>
<title>
	Tablas
</title>
<script language=javaScript1.2>

function subir(x)	{
	var misFilas = document.getElementById("cuerpoTabla");
	var soy = x.parentNode.parentNode; // etiqueta tr
	var miSitio = soy.rowIndex;
	if (miSitio == (misFilas.parentNode.rows.length - 1)) return;// última fila

	if (miSitio == 0)	{ // cambiamos los colores de las flechas
		misFilas.parentNode.rows[0].getElementsByTagName("b")[1].style.color = "blue";
		misFilas.parentNode.rows[1].getElementsByTagName("b")[1].style.color = "#eeeeee";
	}

	if ((miSitio + 2) == (misFilas.parentNode.rows.length))	{
		misFilas.parentNode.rows[miSitio + 1].getElementsByTagName("b")[0].style.color = "blue";
		x.style.color = "#eeeeee";
	}

	var clon1 = soy.cloneNode(true);
	var clon2 = misFilas.parentNode.rows[miSitio + 1].cloneNode(true);

	misFilas.replaceChild(clon2, misFilas.rows[miSitio]);
	misFilas.replaceChild(clon1, misFilas.rows[miSitio + 1]);
}

function bajar(x)	{
	var misFilas = document.getElementById("cuerpoTabla");
	var soy = x.parentNode.parentNode; // etiqueta tr
	var miSitio = soy.rowIndex;
	if (miSitio == 0) return;// última fila

	if (miSitio == 1)	{ // cambiamos los colores de las flechas
		misFilas.parentNode.rows[0].getElementsByTagName("b")[1].style.color = "blue";
		x.style.color = "#eeeeee";
	}

	if ((miSitio + 1) == (misFilas.parentNode.rows.length))	{
		misFilas.parentNode.rows[miSitio].getElementsByTagName("b")[0].style.color = "blue";
		misFilas.parentNode.rows[miSitio - 1].getElementsByTagName("b")[0].style.color = "#eeeeee";
	}


	var clon1 = soy.cloneNode(true);
	var clon2 = misFilas.parentNode.rows[miSitio - 1].cloneNode(true);

	misFilas.replaceChild(clon2, misFilas.rows[miSitio]);
	misFilas.replaceChild(clon1, misFilas.rows[miSitio - 1]);
}



function restar() {
	var miTabla = document.getElementById("cuerpoTabla");
	var i = 0;
	do
		if (miTabla.rows[i].getElementsByTagName("input")[0].checked == true)	{
			miTabla.deleteRow(i);
			if (miTabla.rows.length > 0)	{
				if (i == 0)
					miTabla.rows[i].getElementsByTagName("b")[1].style.color = "#eeeeee";
				if (i == miTabla.rows.length)
					miTabla.rows[i - 1].getElementsByTagName("b")[0].style.color = "#eeeeee";
			}
		}
		else
			i ++;
	while (miTabla.rows.length != i)
}

function suma()	{
	var miTabla = document.getElementById("cuerpoTabla");
	var lasCeldas = miTabla.getElementsByTagName("tr");
	var fila = document.createElement("tr");
	var celda1 = document.createElement("td");
	var celda2 = document.createElement("td");
	celda1.innerHTML = "celda a" + (miTabla.getElementsByTagName("tr").length + 1).toString();
	celda2.innerHTML = "celda b" + (miTabla.getElementsByTagName("tr").length + 1).toString() + "<input type=checkbox>";
	celda2.innerHTML += " <b style='color: #eeeeee' onclick=subir(this)>&darr;</b> <b onclick=bajar(this)>&uarr;</b>"
	lasCeldas[lasCeldas.length - 1].getElementsByTagName("b")[0].style.color = "blue";
	fila.appendChild(celda1);
	fila.appendChild(celda2);
	miTabla.appendChild(fila);
}

</script>
</head>
<body style="color:blue" >
<div align="center">
<h1>
	Ejemplo de Tabla
</h1>
<table id=unaTabla border=1 
style="background-image: url(../colores/emoticon2.gif);
	background-repeat: no-repeat;
	background-position: center center;"
>
<tbody id=cuerpoTabla >
	<tr id=a1>
		<td id=b1>celda a1</td>
		<td id=c1>celda b1<input type=checkbox>
			<b onclick="subir(this)">&darr;</b>
			<b style="color: #eeeeee" onclick="bajar(this)">&uarr;</b>
		</td>
	</tr>
	<tr id=a2>
		<td id=b2>celda a2</td>
		<td id=c2>celda b2<input type=checkbox>
			<b onclick="subir(this)">&darr;</b>
			<b onclick="bajar(this)">&uarr;</b>
		</td>
	</tr>
	<tr id=a3>
		<td id=b3>celda a3</td>
		<td id=c3>celda b3<input type=checkbox>
			<b onclick="subir(this)">&darr;</b>
			<b onclick="bajar(this)">&uarr;</b>
		</td>
	</tr>
	<tr id=a4>
		<td id=b4>celda a4</td>
		<td id=c4>celda b4<input type=checkbox>
			<b onclick="subir(this)">&darr;</b>
			<b onclick="bajar(this)">&uarr;</b>
		</td>
	</tr>
	<tr id=a5>
		<td id=b5>celda a5</td>
		<td id=c5>celda b5<input type=checkbox>
			<b style="color: #eeeeee" onclick="subir(this)">&darr;</b>
			<b onclick="bajar(this)">&uarr;</b>
		</td>
	</tr>
</table>
<button onclick=suma()>sumar</button>
<button onclick=restar()>restar</button>
</div>
</body> 
</html>

Fíjate en subir() y bajar()...

Espero que esto te sirva mejor.

Saludos

[clinisbut]

Ok, muchas gracias, cuando lo pruebe ya comentaré
muchas gracias!