Javascript Onclick con righe di tabella

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

Domanda

Sto riscontrando problemi con il mio codice JScript. Sto cercando di scorrere tutte le righe in una tabella e aggiungere un evento onclick. Posso ottenere l'evento onclick da aggiungere ma ho un paio di problemi.

Il primo problema è che tutte le righe finiscono per essere configurate con il parametro sbagliato per l'evento onclick.

Il secondo problema è che funziona solo in IE.

Ecco l'estratto di codice ... 

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 tabella si trova nella seguente posizione ...

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

Gli ID di ogni riga in sequenza sono ... 95, 96, 94 ...

Per qualche ragione, quando viene chiamato shanesObj.tableRowEvent, l'onclick viene impostato per tutte le righe con l'ultimo valore id che ha attraversato l'iterazione sul loop (94).

Ho aggiunto alcuni avvisi alla pagina per illustrare il problema.

È stato utile?

Soluzione

Quando una funzione viene chiamata in javascript, la prima cosa che succede è che l'interprete imposta la catena dell'ambito sullo stato in cui si trovava quando la funzione è stata definita. Nel tuo caso la catena dell'ambito appare come: 

   GLOBAL
     |
CAll addTableEvents 
     |
CALL onclick

Quindi, quando la variabile orderID viene inciampata dall'interprete javascript, cerca quella catena dell'ambito per quella variabile. Non è stato definito orderID nella funzione onclick , quindi il punto successivo da cercare è all'interno di addTableEvents . Penseresti che orderID sia definito qui, ma poiché non hai dichiarato orderID con la parola chiave var, orderID è diventato una variabile globale, quindi orderID non si trova in addTableEvents . L'ultimo punto da cercare è all'interno di GLOBAL, e sicuramente è lì, e il suo valore è l'ultimo che è stato assegnato, e in questo caso è l'ultimo valore di orderID = row.getAttributeNode (" id " ) .value; nel ciclo for.

Per vedere questo più chiaramente guarda quanto segue 

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

Il risultato di un clic qui sarà sempre -1.

Quindi, per ovviare a questo problema, ti suggerisco di eliminare tutto il codice extra e non necessario e utilizzare qualcosa di simile al seguente, 

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

}

Basta accedere all'attributo id direttamente dall'oggetto chiamato.

P.S. Non ho idea del perché il tuo codice non funziona in IE (ha funzionato nel mio IE7).

Altri suggerimenti

Perché non collegare il gestore eventi alla tabella e prendere il rowindex della cella che ha generato l'evento click all'interno del gestore clic.

puoi diventare molto più semplice di così!
può ovviamente essere utilizzato con righe costruite dinamicamente.
tanto amore,
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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top