Javascript Onclick mit Tabellenzeilen

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

Frage

Ich habe Probleme mit meinem JScript-Code. Ich versuche, durch alle Zeilen in einer Tabelle Schleife und fügen Sie ein Onclick-Ereignis. Ich kann das Onclick-Ereignis erhalten hinzuzufügen, aber ein paar Probleme zu haben.

Das erste Problem ist, dass alle Zeilen mit dem falschen Parameter für das Onclick-Ereignis Los geht am Ende auf.

Das zweite Problem ist, dass es nur im Internet Explorer funktioniert.

Hier ist der Code Auszug ... 

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

In der Tabelle an der folgenden Position befindet ...

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

Die IDs jeder Zeile in Folge ist ... 95, 96, 94 ...

Aus irgendeinem Grund, wenn shanesObj.tableRowEvent genannt wird, wird das Onclick für alle Zeilen mit dem letzten Wert ID einrichten, die durch Iteration auf der Schleife ging (94).

Ich habe einige Warnungen an der Seite, um das Problem zu veranschaulichen.

War es hilfreich?

Lösung

Wenn eine Funktion in Javascript aufgerufen wird, dass das erste, was passiert ist, dass der Dolmetscher den Umfang Kette an den Staat setzt er sich befand, als die Funktion definiert wurde. In Ihrem Fall sieht der Umfang Kette wie: 

   GLOBAL
     |
CAll addTableEvents 
     |
CALL onclick

Also, wenn die Variablen orderID auf den Umfang Kette für diese Variable wird nach dem JavaScript-Interpreter gestolpert ist. Es gibt keine orderID definiert in Ihrem Onclick Funktion, so dass der nächste Punkt Blick ins Innere ist addTableEvents . Sie würden denken, orderID definiert hier ist, aber da man nicht erklären, orderID mit dem Schlüsselwort var, orderID eine globale Variable wurde, so orderID nicht innerhalb gefunden addTableEvents . Der letzte Punkt zu sehen ist innerhalb GLOBAL, und sicher genug, es ist da, und sein Wert ist die letzte, die sie zugewiesen wurden, und in diesem Fall ist es der letzte Wert von orderID = row.getAttributeNode ( „id“) .value;. in der for-Schleife

Um dies zu sehen klarer Blick auf die folgende 

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

Das Ergebnis einer hier klicken immer -1 sein.

Also, um dieses Problem zu bekommen, empfehle ich Ihnen alle zusätzlichen und unnötigen Code fallen und so etwas wie die folgenden verwenden, 

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

}

Zugriff nur das id-Attribut direkt aus dem aufgerufenen Objekt.

P. S. Ich habe keine Ahnung, warum Ihr Code nicht in IE funktioniert (es funktionierte in meinem IE7).

Andere Tipps

Warum das Ereignishandler an den Tisch nicht anhängen und die rowIndex der Zelle greifen, die das Click-Ereignis in der Click-Handler gebrannt.

y'cant bekommen viel einfacher als das!
kann offensichtlich mit dynamisch aufgebaut Zeilen verwendet werden.
viel Liebe,
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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top