Cambiar color de fila al seleccionar checkbox, como hace hotmail...

Subotai · #1 (**permalink**) 24/06/2003, 05:45

Pues mi pregunta es como puedo hacer para que al seleccionar un checkbox que esta en una celda, cambie el color de la fila a la que pertenece.
Algo al estilo hotmail para marcar el correo, he mirado el codigo de hotmail y he podido ver que con el evento onchange llama a una funcion supongo que en javascript, pero no tengo ni idea de javascript.
Alguien me puede ayudar?

JavierB · #2 (**permalink**) 24/06/2003, 06:10

Hola, Subotai.

A ver si esto te ayuda:

Código PHP:

  <html> 
<head> 
<script> 
function marcar(obj) { 
    if (obj.checked) 
        document.getElementById('fila').style.backgroundColor='ff0000' 
    else 
        document.getElementById('fila').style.backgroundColor='' 
} 
</script> 
</head> 
 
<body> 
<table> 
  <tr id="fila"> 
    <td></td> 
    <td></td> 
    <td> 
    <input type="checkbox" onClick="marcar(this)"> 
    </td> 
  </tr> 
  <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
  </tr> 
</table> 
</body> 
 
</html>

Saludos,

Subotai · #3 (**permalink**) 24/06/2003, 06:45

Funciona, pero no exactamente como yo queria, de esta manera solamente me colorea una fila, la primera.
Hayyyyy, se me olvidó decirte que lo que tengo es un monton de checkbox, uno por cada fila, y lo que pretendo es que cada checkbox seleccionado pinte su fila correspondiente, tengo una variable contador para controlar el bucle de extraccion por el cual saco los registros de la bd, podria uasr eso para identificar univocamente cada fila pero no se como implementarlo en tu funcion javascript, mi pagina es en asp.
Sugerencias...
gracias por colaborar!!!!!!!

Cauchemar · #4 (**permalink**) 24/06/2003, 07:08

Bueno, no podrias utilizar la funcion de javier pasandole el ide la fila que quieres cambiar?

Si las filas las generas dinamicamente no habra problemas para que tengan ids distintos, y si son estaticas.. aun menos

tienes dos opciones faciles:

Pasandole un valor extra aparte del this

Código:

<script>
function marcar(obj,id) {
    if (obj.checked)
        document.getElementById('+id+').style.backgroundColor='ff0000'
    else
        document.getElementById('+id+').style.backgroundColor=''
}
</script>

<tr id="X">
    <td></td>
    <td></td>
    <td>
    <input type="checkbox" onClick="marcar(this,X)">
    </td>
  </tr>

O usando el caller

Código:

<script>
function marcar(id) {
    if (marcar.caller.checked)
        document.getElementById('+id+').style.backgroundColor='ff0000'
    else
        document.getElementById('+id+').style.backgroundColor=''
}
</script>

<tr id="X">
    <td></td>
    <td></td>
    <td>
    <input type="checkbox" onClick="marcar(X)">
    </td>
  </tr>

Tambien puede que resulte mas facil acceder al objeto a traves del array de document.all [] pero eso ya como tu veas

Bravenap · #5 (**permalink**) 24/06/2003, 07:13

Ya se me han adelantado

Bueno aquí te dejo otra posibilidad con un regalito

[Ejemplo]

Código:

<html>
<head>
<script>
var seleccionado=new Array()
function cambia(fila){
if(seleccionado[fila]!=true)
	{
	document.getElementById("fila"+fila).style.background='#3399FF';
	document.getElementById("fila"+fila).style.color='#FFFFFF';
	seleccionado[fila]=true;
	}
else
	{
	document.getElementById("fila"+fila).style.background='#66CCFF';
	document.getElementById("fila"+fila).style.color='#000000';
	seleccionado[fila]=false;
	}	
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#66CCFF" id="fila1"><input type="checkbox" onClick="cambia(1)">Primera fila</td>
  </tr>
  <tr>
    <td bgcolor="#66CCFF" id="fila2"><input type="checkbox" onClick="cambia(2)">Segunda fila</td>
  </tr>
  <tr>
    <td bgcolor="#66CCFF" id="fila3"><input type="checkbox" onClick="cambia(3)">Tercera fila</td>
  </tr>
  <tr>
    <td bgcolor="#66CCFF" id="fila4"><input type="checkbox" onClick="cambia(4)">Cuarta fila</td>
  </tr>
</table>
</body>
</html>

Subotai · #6 (**permalink**) 24/06/2003, 07:29

Desde luego Bravenap tienes mala suerte he.... y ya van unas cuantas

, pero bueno habra que tomarselo con humor , no?

jejeje
pues muchas gracias a todos voy a hecharle un vistazo a vuestras sugerencias
ta pronto!!!!

Bravenap · #7 (**permalink**) 24/06/2003, 07:32

Si es que soy un poquito lento

... y con el calor que hace ...

Subotai · #8 (**permalink**) 24/06/2003, 08:07

Pues no me hace nada, mirar haber si veis algo inusual, necesitaba cambiar alguna cosilla pero no creo que se me hay ido la mano...

<HTML>
<HEAD>

<script>
function marcar(obj,id) {
if (obj.checked)
document.getElementById('+id+').style.backgroundCo lor='#E87471'
else
document.getElementById('+id+').style.backgroundCo lor=''
}
</script>

<script>
function marcar2(obj,id) {
if (obj.checked)
document.getElementById('+id+').style.backgroundCo lor='#339900'
else
document.getElementById('+id+').style.backgroundCo lor=''
}
</script>

<% do while not RS.eof and contador <= cint(tampagina)
if contador mod 2 = 0 then
elcolor="#929AAF"
Else
elcolor="#B0AFBE"
End if
%>
<tr id='<%=contador%>' marginwidth="0" bgcolor='<%=elcolor%>'>
<td marginwidth="0" ALIGN=CENTER WIDTH="5%">
<INPUT TYPE=CHECKBOX NAME='ALTA&<%=contador%>' VALUE='<%=expediente%>' onClick="marcar(this,'<%=contador%>')">
</td>
<td marginwidth="0" ALIGN=CENTER >
<%= RS("campo1") %>
</td>

<td marginwidth="0" ALIGN=CENTER >
<%= RS("campo2") %>
</td>
<td marginwidth="0" ALIGN=CENTER WIDTH="5%">
<INPUT TYPE=CHECKBOX NAME='BAJA&<%=contador%>' VALUE='<%=expediente%>' onClick="marcar2(this,'<%=contador%>')">
</td>

</tr>
<%
contador=contador+1
RS.movenext
loop
%>

</table>
gracias por vuestra paciencia

Cauchemar · #9 (**permalink**) 24/06/2003, 08:16

fallo mio.. es:

Código:

document.getElementById(id).style.backgroundColor='#E87471'

en vez de

Código:

 

document.getElementById('+id+').style.backgroundColor='#E87471'

Subotai · #10 (**permalink**) 25/06/2003, 02:54

Ok, provado y funcionando!
otra cosa, como podria montarmelo para hacer un checkbox que al seleccionarlo me acivara o desactivara un grupo definido de checkboxes, o todos
gracias a tooos

JavierB · #11 (**permalink**) 25/06/2003, 03:09

Hola de nuevo.

Prueba esto a ver si te sirve:

Código PHP:

  <html> 
<head> 
<script> 
function marcar() { 
    obj=arguments[0]; 
    for(i=1;i<arguments.length;i++) { 
    if (obj.checked) 
        document.getElementById(arguments[i]).style.backgroundColor='ff0000' 
    else 
        document.getElementById(arguments[i]).style.backgroundColor='' } 
} 
</script> 
</head> 
 
<body> 
<table> 
  <tr id="fila1"> 
    <td>Celda 1</td> 
    <td>Celda 2</td> 
    <td> 
    <input type="checkbox" onClick="marcar(this,'fila1')"> 
    </td> 
  </tr> 
  <tr id="fila2"> 
    <td>Celda 3</td> 
    <td>Celda 4</td> 
    <td> 
    <input type="checkbox" onClick="marcar(this,'fila2')"> 
    </td> 
  </tr> 
  <tr id="fila3"> 
    <td>Celda 3</td> 
    <td>Celda 4</td> 
    <td> 
    <input type="checkbox" onClick="marcar(this,'fila3')"> 
    </td> 
  </tr> 
</table> 
<input type="checkbox" onClick="marcar(this,'fila1','fila3')"> 
</body> 
 
</html>

En el último checkbox, a continuación de this, pones las filas que quieres manejar separadas por comas.

Saludos,

Bravenap · #12 (**permalink**) 25/06/2003, 06:34

Pero recuerda que si la fila cambia de color el checkbox que le corresponde también debería marcarse ¿no?

¿Sería algo así como poner obj.checked=true? Pero ¿dónde?

Bravenap · #13 (**permalink**) 25/06/2003, 06:49

Bueno, más o menos he conseguido algo. A ver qué os parece:

Código:

<html>
<head>
<script>
function marcar() {
    obj=arguments[0];
    for(i=1;i<arguments.length;i++)
	{
	marca=arguments[i].replace('fila','');
	marca='c'+marca;
    if (obj.checked){
	document.getElementById(arguments[i]).style.backgroundColor='#6699FF';
	document.getElementById(marca).checked=true;
	}
    else{
	document.getElementById(arguments[i]).style.backgroundColor='#66CCFF';
	document.getElementById(marca).checked=false;
	document.getElementById('cTodos').checked=false;
	}
	}
}
</script>
</head>

<body>
<table>
  <tr bgcolor="#66CCFF" id="fila1"> 
    <td>T&iacute;tulo 1</td>
    <td>Remitente 1</td>
    <td> 
      <input id="c1" type="checkbox" onClick="marcar(this,'fila1')">
    </td>
  </tr>
  <tr bgcolor="#66CCFF" id="fila2"> 
    <td>T&iacute;tulo 2</td>
    <td>Remitente 2</td>
    <td> 
      <input id="c2"  type="checkbox" onClick="marcar(this,'fila2')">
    </td>
  </tr>
  <tr bgcolor="#66CCFF" id="fila3"> 
    <td>T&iacute;tulo 3</td>
    <td>Remitente 3</td>
    <td> 
      <input id="c3"  type="checkbox" onClick="marcar(this,'fila3')">
    </td>
  </tr>
</table>
<input type="checkbox" onClick="marcar(this,'fila1','fila3')">
Marcar mensajes 1 y 3<br>
<input id="cTodos" name="checkbox" type="checkbox" onClick="marcar(this,'fila1','fila2','fila3')">
Marcar todos los mensajes 
</body>

</html>

Por cierto, acabo de entender qué es eso de arguments. Lo veía en muchos sitios pero todavía no lo había pillado. Gracias JavierB.

Un saludo a todos.

JavierB · #14 (**permalink**) 25/06/2003, 13:44

Cita:

Mensaje Original por Bravenap
Por cierto, acabo de entender qué es eso de arguments. Lo veía en muchos sitios pero todavía no lo había pillado. Gracias JavierB.

De nada. A veces resulta útil poder pasar un número indeterminado de argumentos. ¿verdad?

Y ya puestos... se podría ahorrar un par de líneas de código y de paso marcar o desmarcar el checkbox para las líneas 1 y 3 dependiendo del estado del checkbox para todas las líneas:

Código PHP:

  <html> 
<head> 
<script> 
function marcar() { 
    obj=arguments[0]; 
    if (obj==cTodos)  
        document.getElementById('cDos').checked=obj.checked; 
    for(i=1;i<arguments.length;i++) 
    { 
    if (obj.checked){ 
    document.getElementById(arguments[i]).style.backgroundColor='#6699FF'; 
    document.getElementById(arguments[i]+'c').checked=true; 
    } 
    else{ 
    document.getElementById(arguments[i]).style.backgroundColor='#66CCFF'; 
    document.getElementById(arguments[i]+'c').checked=false; 
    document.getElementById('cTodos').checked=false; 
    } 
    } 
} 
</script> 
</head> 
 
<body> 
<table> 
  <tr bgcolor="#66CCFF" id="fila1">  
    <td>Título 1</td> 
    <td>Remitente 1</td> 
    <td>  
      <input id="fila1c" type="checkbox" onClick="marcar(this,'fila1')"> 
    </td> 
  </tr> 
  <tr bgcolor="#66CCFF" id="fila2">  
    <td>Título 2</td> 
    <td>Remitente 2</td> 
    <td>  
      <input id="fila2c"  type="checkbox" onClick="marcar(this,'fila2')"> 
    </td> 
  </tr> 
  <tr bgcolor="#66CCFF" id="fila3">  
    <td>Título 3</td> 
    <td>Remitente 3</td> 
    <td>  
      <input id="fila3c"  type="checkbox" onClick="marcar(this,'fila3')"> 
    </td> 
  </tr> 
</table> 
<input id="cDos" type="checkbox" onClick="marcar(this,'fila1','fila3')"> 
Marcar mensajes 1 y 3<br> 
<input id="cTodos" type="checkbox" onClick="marcar(this,'fila1','fila2','fila3')"> 
Marcar todos los mensajes  
</body> 
 
</html>

¿Quien se anima a ser el siguiente en mover ficha?

Saludos,

Subotai · #15 (**permalink**) 26/06/2003, 03:31

Gracias por los ejemplos pero todavia no he resuelto mi poblema, al y como lo teneis en el ejemplo no me sire de mucho ya que introducis los argumentos de la funcion manualmente, pero yo lo necesito a traves de un bucle.... habia pensado almacenar en un string todos los id de cada fila y pasarle el string como argumento pero no se como tratarlo en javascript, una ayudita?
los id de cada columna son un numero almacenado en una variable contador que se va incrementando a medida que se ejecuta el bucle
Espero que me podais ayudar....
gracias

Bravenap · #16 (**permalink**) 26/06/2003, 03:38

Pues cuando marques la casilla de "Marcar todos" se envíe el argumento 'todos'. Luego con un condicinal pones que si el argumento es 'todos' recorra con un bucle desde 1 hasta el número total de filas haciendo lo propio en cada vuelta.

Subotai · #17 (**permalink**) 26/06/2003, 03:51

Bien pero la unica manera de saber cual es la ultima fila es mirando el ultimo valor del contador, como supongo que el ambito del contador no alcanza al script tendre que mandarselo como parametro adicional,
<input id="cTodos" type="checkbox" onClick="marcar(this,"marcar_todos",<%=contador%>) ">
asi colaria o habria que modificar el script tambien?

Bravenap · #18 (**permalink**) 26/06/2003, 03:58

Ahhh, que lo haces con ASP, entonces no hay problema. Donde tienes que indicar el número de resgistros es en el bucle, no en la llamada a la función.

for(i=1;i<=<%=numero_total_registros%>;i++)

Y el valor del número total de registros, bien lo vas acumulando en la consulta o bien lo capturas con la longitud total del recordset.

¿mexplicaubien?

Subotai · #19 (**permalink**) 26/06/2003, 04:15

Oye Brave perdona que te haga esto pero es que hoy no estoy para darle al coco...(El concierto de los

Rolling Stones

de ayer me ha dejao muerto!!!

...por cierto fue LA OSTIA!!!!!!!!!!!!!!!!HAY QUE REPETIR!!!!!!)

te pongo la parte de codigo asp, mira esta tabla muestra registros de una bd, es muuy larga asi que esta paginada (pa que no te lies)

<FORM METHOD=POST ACTION='permisos.asp'>
<input id="cTodos" type="checkbox" onClick="marcar(this,'<%=filas%>')" title="Seleccionar o anular la selección de todos los mensajes">Todos

<TABLE width="100%" align=center>
<TR width="100%" align=center>

<TD width="10%" align=left>

</TD>

<TD width="80%" align=center bgcolor=#44556F>
<table align=center WIDTH="100%">
<tr bgcolor="#D7D7D7">
<td ALIGN=CENTER marginwidth="0" COLSPAN="2" >
EXPEDIENTE
</td>
<td ALIGN=CENTER marginwidth="0" COLSPAN="2">
DESCRIPCION DEL EXPEDIENTE
</td>
</tr>

<% do while not RS.eof and contador <= cint(tampagina)
if contador mod 2 = 0 then
elcolor="#929AAF"
Else
elcolor="#B0AFBE"
End if
%>
<tr id='<%=contador%>' marginwidth="0" bgcolor='<%=elcolor%>'>
<% expediente=rtrim(RS("cp_02071"))
expediente = replace(expediente," ","%20") 'quedara la%20frase
%>
<td marginwidth="0" ALIGN=CENTER WIDTH="5%">
<INPUT TYPE=CHECKBOX id='<%=contador%>' NAME=<%=contador%>' VALUE='<%=expediente%>' onClick="marcar(this,'<%=contador%>')">
</td>
<td marginwidth="0" ALIGN=CENTER >
<%= RS("cp_02071") %> &nbsp </td>

<td marginwidth="0" ALIGN=CENTER >
<%= RS("cont51") %>
</td>
<td marginwidth="0" ALIGN=CENTER WIDTH="5%">

</td>

</tr>
<%
contador=contador+1
RS.movenext
loop
%>
</table>
</TD>
</TR>
</TABLE>
</TABLE >
<TABLE align=center width=500 bgcolor=#2D3E57>
<TR bgcolor=#6891AE>
<TD align=center><input type=submit name=opcion value="Anterior"></TD>
<TD align=center><input type=submit name=opcion value="Cancelar"></TD>
<TD align=center><input type=submit name=opcion value="Siguiente"></TD>
</TR>
</TABLE>

gracias pro ayudarme, hoy necesito que alguien me deje su cerebro,pulmones,higado,.....los mios me los dejaria en San Mamés por que por aki no están!!!!!

axias

Bravenap · #20 (**permalink**) 26/06/2003, 04:32

Encima que se mete un conciertazo entre pecho y espalda el muy ...., dice que está cansado, será ... . Lo hay con suerte.

Bueno, es broma.

Ya ví tu codigo y ¿dónde está el problema?

Parece que todo está bien, salvo por una cosilla. Le has dado el mismo identificador a la fila y a la casilla, por lo que te puede dar problemas... de hecho creo que te os va a dar.

Ponle a la fila algo así como id="fila<%=contador%>" y a la casilla id="check<%=contador%>". Así los dos tendrán en el mismo número pero distinto nombre.

Suerte.

lithiumfire · #21 (**permalink**) 10/12/2004, 11:29

Hola, necesito su ayuda miren, ésta es mi tabla:

Código HTML:

<table id="tableOne">

	<thead>

		<tr>
			<th/>
			<th id="row" title="Option One">Option One</td>
			<th id="row" title="Option Two">Option Two</td>
			<th id="row" title="Option Three">Option Three</td>
			<th id="row" title="Option Four">Option Four</td>
			<th/>
		</tr>

	</thead>

	<tbody>

		<tr>
			<td id="edit"/>
			<td onmouseover="this.style.backgroundColor='#33CC99';" onmouseout="this.style.backgroundColor='cyan';" id="data">05</a></td>
			<td onmouseover="this.style.backgroundColor='#33CC99';" onmouseout="this.style.backgroundColor='cyan';" id="data">ABC</td>
			<td onmouseover="this.style.backgroundColor='#33CC99';" onmouseout="this.style.backgroundColor='cyan';" id="data">12.00</td>
			<td onmouseover="this.style.backgroundColor='#33CC99';" onmouseout="this.style.backgroundColor='cyan';" id="data">12/12/2004</td>
			<td id="erase"/>
		</tr>
	</tbody>
</table>

Bien, esto sólo me ilumina la celda que señalo, es lo más sencillo del mundo, pero también necesito que TAMBIÉN se ilumine el resto de la fila pero con OTRO color... ¿me explico? En otras palabras quiero que la fila que señale se ilumine de verde mientras q sólo la celda de ésa misma fila sobre la q está el cursor se ilumine pero de otro color.

Gracias de antemano!

derkenuke · #22 (**permalink**) 06/09/2005, 16:50

Para todos:
Yo lo veo tan facil como una funcion de una sola linea, con nuestro amigo DOM que cada dia me gusta mas

:

Código PHP:

  <html>  
<head>  
<script>  
function marcar(check) {  
    check.parentNode.parentNode.style.backgroundColor=check.checked?"#FF0000":"#FFFFFF"; 
}  
</script>  
</head>  
 
<body>  
<table>  
  <tr id="fila1">  
    <td>Celda 1</td>  
    <td>Celda 2</td>  
    <td>  
    <input type="checkbox" onClick="marcar(this)">  
    </td>  
  </tr>  
  <tr id="fila2">  
    <td>Celda 3</td>  
    <td>Celda 4</td>  
    <td>  
    <input type="checkbox" onClick="marcar(this)">  
    </td>  
  </tr>  
  <tr id="fila3">  
    <td>Celda 3</td>  
    <td>Celda 4</td>  
    <td>  
    <input type="checkbox" onClick="marcar(this)">  
    </td>  
  </tr>  
</table>  
</body>  
 
</html>

Para lithiumfire:
Antes de nada me gustaria comentarte un par de cosas de tu (x)HTML:
1) Es la primera vez que veo <thead>, gracias por mostrarmela

2) <th> es una celda en negrita y centrada, pero una celda, no es un grupo de celdas.
3) ¿Un elemento <td> sin contenido, cerrado? m?
4) No puedes poner atributos id iguales a distintos elementos, habría problemas.
5) Hay enlaces sin abrir (</a>) en la primera celda <td>

Con DOM tambien. Se podria hacer esto para ahorrarte ensuciar el HTML:

Código PHP:

  <html>  
<head>  
</head>  
 
<body>  
 
<table id="tablaEspecial" border="1"> 
    <thead> 
        <tr> 
            <th>Option One</th> 
            <th>Option Two</th> 
            <th>Option Three</th> 
            <th>Option Four</th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td>05</td> 
            <td>ABC</td> 
            <td>12.00</td> 
            <td>12/12/2004</td> 
        </tr> 
        <tr> 
            <td>05</td> 
            <td>ABC</td> 
            <td>12.00</td> 
            <td>12/12/2004</td> 
        </tr> 
        <tr> 
            <td>05</td> 
            <td>ABC</td> 
            <td>12.00</td> 
            <td>12/12/2004</td> 
        </tr> 
        <tr> 
            <td>05</td> 
            <td>ABC</td> 
            <td>12.00</td> 
            <td>12/12/2004</td> 
        </tr> 
    </tbody> 
</table> 
 
<table id="otraTabla" border="1"> 
    <thead> 
        <tr> 
            <th>Option One</th> 
            <th>Option Two</th> 
            <th>Option Three</th> 
            <th>Option Four</th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td>05</td> 
            <td>ABC</td> 
            <td>12.00</td> 
            <td>12/12/2004</td> 
        </tr> 
        <tr> 
            <td>05</td> 
            <td>ABC</td> 
            <td>12.00</td> 
            <td>12/12/2004</td> 
        </tr> 
        <tr> 
            <td>05</td> 
            <td>ABC</td> 
            <td>12.00</td> 
            <td>12/12/2004</td> 
        </tr> 
        <tr> 
            <td>05</td> 
            <td>ABC</td> 
            <td>12.00</td> 
            <td>12/12/2004</td> 
        </tr> 
    </tbody> 
</table> 
 
<script> 
//la tabla especial 
var tE=document.getElementById("tablaEspecial"); 
//las celdas de la tabla especial 
var tE_td=tE.getElementsByTagName("TD"); 
//por cada celda en tE 
for(var a=0;a<tE_td.length;a++) { 
    tE_td[a].onmouseover=function() { 
        //las celdas de la fila de esta celda 
        var tE_td_tr_tds=this.parentNode.childNodes; 
        //coloreamos cada celda de la fila 
        for(var b=0;b<tE_td_tr_tds.length;b++) 
            tE_td_tr_tds[b].style.backgroundColor="#0000FF"; 
        //coloreamos la propia celda 
        this.style.backgroundColor="#00FF00"; 
    } 
    tE_td[a].onmouseout=function() { 
        //las celdas de la fila de esta celda 
        var tE_td_tr_tds=this.parentNode.childNodes; 
        //descoloreamos cada celda de la fila 
        for(var b=0;b<tE_td_tr_tds.length;b++) 
            tE_td_tr_tds[b].style.backgroundColor="#FFFFFF"; 
        //descoloreamos la propia celda 
        this.style.backgroundColor="#FFFFFF"; 
    } 
} 
 
</script> 
 
</body>  
 
</html>

Esta hecho de manera que es aplicable a la tabla que quieras, pero si las quieres para todas las de tu documento no es dificil, basta sustituir esto:

Código:

//la tabla especial
var tE=document.getElementById("tablaEspecial");
//las celdas de la tabla especial
var tE_td=tE.getElementsByTagName("TD");

Con

Código:

var tE_td=document.getElementsByTagName("TD");

Aunque lo mas sensato seria cambiar el nombre de la variable, por si no te quieres andar con complicaciones.

Y un saludo a todos!