Valores de una fila

ivanillo · #1 (**permalink**) 09/10/2007, 14:55

Hola necesito que al hacer click en una fila de una tabla, esta cambie de color (hasta aquí sin problema) y ademas me devuelva los valores de las celdas de esa tabla, con el siguiente código me funciona en IE6 y Opera pero no en Firefox. Podéis Ayudarme ???
Gracias:

CODIGO:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="contactos.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
function selecciona(id){
if (document.getElementById){
//alert(id);
var ele=document.getElementById(id);
var filas = document.getElementsByTagName("tr");
//alert (filas.length);
for(var i=0; i<filas.length; i++) {
var fila = filas[i];
fila.style.backgroundColor = '#FFFFFF';
}
ele.style.backgroundColor = '#BBBBBB';

/*
alert(ele.childNodes[0].firstChild.nodeValue);
alert(ele.childNodes[1].firstChild.nodeValue);
alert(ele.childNodes[2].firstChild.nodeValue);
*/
for(var j=0; j < ele.childNodes.length; j++) {
//alert(j);
alert(ele.childNodes[j].firstChild.nodeValue);
}
}
}
</script>

</head>

<body class="oneColElsCtrHdr">

<div id="container">
<div id="header">
<h1>Header</h1>

</div>

<div id="mainContent" align="center">
<p> </p>
<table width="500" border="1" id="tablaid">

<tr id="tr1" onclick="selecciona('tr1')">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>

<tr id="tr2" onclick="selecciona('tr2')">
<td>d</td>
<td>e</td>
<td>f</td>
</tr>

<tr id="tr3" onclick="selecciona('tr3')">
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>

<h1> </h1>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>

derkenuke · #2 (**permalink**) 09/10/2007, 15:56

Hola ivanillo, bienvenido al foro:

A mi a veces tanto childNode me da un poco de miedo, nunca sabes si va a coger una etiqueta HTML o un nodo de texto en blanco (tabulaciones, espacios en el código...).

Lo que hago normalmente para navegar por nodos es utilizar un while y voy profundizando hasta que llego a la etiqueta que busco. Pero en este caso con coger todos los hijos TD creo que vale:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

 
<script type="text/javascript">

var anteriorFilaSeleccionada = null;

function selecciona(fila){

    if( anteriorFilaSeleccionada )

        anteriorFilaSeleccionada.style.backgroundColor = '#FFFFFF';

    fila.style.backgroundColor = '#BBBBBB';

    anteriorFilaSeleccionada = fila;

    var celdasEnFila = fila.getElementsByTagName("TD");

    for(var j=0; j<celdasEnFila.length; j++) {

        alert(celdasEnFila[j].firstChild.nodeValue);

    }

}

</script>

 
 
</head>

 
<body>

 
<table width="500" border="1" id="tablaid">

    <tr onclick="selecciona(this)">

        <td>a</td>

        <td>b</td>

        <td>c</td>

    </tr>

    <tr onclick="selecciona(this)">

        <td>d</td>

        <td>e</td>

        <td>f</td>

    </tr>

    <tr onclick="selecciona(this)">

        <td>g</td>

        <td>h</td>

        <td>i</td>

    </tr>

</table>

 
 
</body>

</html>

También te ahorrarás los id's y escribir argumentos utilizando el this. Te ahorras tiempo de ejecución (sobre todo en ordenadores lentos si hay muchas filas) si guardas la fila que acabas de colorear con anteriorFilaSeleccionada, así no tienes que recorrer todas las filas.

Lo he probado sólo en FF2 y en IE6, tendrás que probarlo en el resto.

Un saludo.

ivanillo · #3 (**permalink**) 14/10/2007, 03:56

OK
Gracias 1000