Javascript Onclick con filas de tabla

StackOverflow https://stackoverflow.com/questions/454517

Pregunta

Tengo problemas con mi código JScript. Estoy tratando de recorrer todas las filas de una tabla y agregar un evento onclick. Puedo obtener el evento onclick para agregar pero tengo un par de problemas.

El primer problema es que todas las filas terminan configuradas con el parámetro incorrecto para el evento onclick.

El segundo problema es que solo funciona en IE.

Aquí está el extracto del código ... 

shanesObj.addTableEvents = function(){
table = document.getElementById("trackerTable");
for(i=1; i<table.getElementsByTagName("tr").length; i++){
    row = table.getElementsByTagName("tr")[i];
    orderID = row.getAttributeNode("id").value;
    alert("before onclick: " + orderID);
    row.onclick=function(){shanesObj.tableRowEvent(orderID);};
}}

shanesObj.tableRowEvent = function(orderID){
alert(orderID);}

La tabla se encuentra en la siguiente ubicación ...

http://www.blackcanyonsoftware.com/OrderTracker/testAJAX.html

Los ID de cada fila en secuencia son ... 95, 96, 94 ...

Por alguna razón, cuando se llama a shanesObj.tableRowEvent, el onclick se configura para todas las filas con el último ID de valor que pasó por la iteración en el bucle (94).

Agregué algunas alertas a la página para ilustrar el problema.

¿Fue útil?

Solución

Cuando se llama a una función en javascript, lo primero que sucede es que el intérprete establece la cadena de alcance en el estado en que estaba cuando se definió la función. En su caso, la cadena de alcance se ve así: 

   GLOBAL
     |
CAll addTableEvents 
     |
CALL onclick

Entonces, cuando el intérprete de JavaScript tropieza con la variable orderID , busca esa variable en la cadena de alcance. No hay un orderID definido dentro de su función onclick , por lo que el siguiente lugar para buscar está dentro de addTableEvents . Pensaría que orderID se define aquí, pero como no declaró orderID con la palabra clave var, orderID se convirtió en una variable global, por lo que orderID no se encuentra dentro de addTableEvents . El último lugar para buscar está dentro de GLOBAL, y efectivamente está allí, y su valor es el último que se le asignó, y en este caso es el último valor de orderID = row.getAttributeNode (" id " ) .value; en el bucle for.

Para ver esto más claramente, mira lo siguiente 

shanesObj.addTableEvents = function(){
table = document.getElementById("trackerTable");
for(i=1; i<table.getElementsByTagName("tr").length; i++){
        row = table.getElementsByTagName("tr")[i];
        orderID = row.getAttributeNode("id").value;
        alert("before onclick: " + orderID);
        row.onclick=function(){var orderID = orderID; shanesObj.tableRowEvent(orderID);};
}
orderID = -1;
}

shanesObj.tableRowEvent = function(orderID){
alert(orderID);
}

El resultado de un clic aquí siempre será -1.

Entonces, para solucionar este problema, le sugiero que suelte todo el código adicional e innecesario y use algo como lo siguiente, 

for(i=1; i<table.getElementsByTagName("tr").length; i++){
        row = table.getElementsByTagName("tr")[i];
        row.onclick=function(){shanesObj.tableRowEvent(this.id);};

}

Simplemente acceda al atributo id directamente desde el objeto llamado.

P.S. No tengo idea de por qué su código no funciona en IE (funcionó en mi IE7).

Otros consejos

¿Por qué no adjuntar el controlador de eventos a la tabla y tomar el índice rowin de la celda que activó el evento de clic dentro del controlador de clics?

¡

no puedes ser mucho más simple que esto!
obviamente se puede usar con filas construidas dinámicamente.
mucho amor,
sb. 

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var TO,URL;
function Link(url){
 URL=url;
 TO=setTimeout('window.location=URL;',500);
}
//-->
</script>
</head>

<body>

<tr onclick="Link('anotherpage.html');">
<td>row1 cell1</td>
<td>row1 cell2</td>
</tr>

<tr onclick="Link('yetanotherpage.html');">
<td>row2 cell3</td>
<td>row2 cell4</td>
</tr>

</body>

</html>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top