JavaScript OnClick com linhas de tabela

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

Pergunta

Estou tendo problemas com meu código JScript. Estou tentando atravessar todas as linhas de uma mesa e adicionar um evento OnClick. Eu posso obter o evento OnClick para adicionar, mas tenho alguns problemas.

O primeiro problema é que todas as linhas acabam sendo configuradas com o parâmetro errado para o evento OnClick.

O segundo problema é que ele só funciona no IE.

Aqui está o trecho de 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);}

A tabela está localizada no seguinte local ...

http://www.blackcanyonsoftware.com/ordertracker/testajax.html

Os IDs de cada linha em sequência são ... 95, 96, 94 ...

Por alguma razão, quando Shanesobj.tableRowEvent é chamado, o OnClick é configurado para todas as linhas com o último ID do valor que passou pela iteração no loop (94).

Adicionei alguns alertas à página para ilustrar o problema.

Foi útil?

Solução

Quando uma função é chamada em JavaScript, a primeira coisa que acontece é que o intérprete define a cadeia de escopo para o estado em que estava quando a função foi definida. No seu caso, a corrente de escopo se parece:

   GLOBAL
     |
CAll addTableEvents 
     |
CALL onclick

Então, quando a variável OrderId é tropeçado pelo intérprete JavaScript que procura na cadeia de escopo dessa variável. Não há OrderId definido dentro do seu ONCLICK função, então o próximo local para olhar está dentro AddTableEvents. Você pensaria OrderId é definido aqui, mas como você não declarou OrderId com a palavra -chave var, OrderId tornou -se uma variável global, então OrderId não é encontrado dentro AddTableEvents. O último ponto a ser observado é dentro do Global, e com certeza está lá, e seu valor é o último que foi atribuído, e neste caso é o último valor de OrderId = row.getAttributenode ("id"). no loop for.

Para ver isso, olhe mais claramente para o seguinte

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);
}

O resultado de um clique aqui sempre será -1.

Então, para contornar esse problema, sugiro que você solte todo o código extra e desnecessário e use algo como o seguinte,

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

}

Basta acessar o atributo de identificação diretamente do objeto chamado.

PS Eu não tenho idéia de por que seu código não funciona no IE (funcionou no meu IE7).

Outras dicas

Por que não anexar o manipulador de eventos à tabela e pegar o RowIndex da célula que disparou o evento de clique dentro do manipulador de cliques.

Você fica muito mais simples que isso!
Obviamente, pode ser usado com linhas construídas dinamicamente.
muito 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 em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top