Javascript Onclick avec les lignes de la table

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

Question

J'ai des problèmes avec mon code JScript. J'essaie de parcourir toutes les lignes d'une table et d'ajouter un événement onclick. Je peux obtenir l'événement onclick à ajouter, mais j'ai quelques problèmes.

Le premier problème est que toutes les lignes sont finalement configurées avec le mauvais paramètre pour l'événement onclick.

Le deuxième problème est que cela ne fonctionne que dans IE.

Voici l'extrait de code ... 

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 table est située à l'emplacement suivant ...

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

Les identifiants de chaque ligne dans l'ordre sont ... 95, 96, 94 ...

Pour une raison quelconque, lorsque shanesObj.tableRowEvent est appelé, onclick est défini pour toutes les lignes dont le dernier identifiant de valeur est passé par une itération sur la boucle (94).

J'ai ajouté des alertes à la page pour illustrer le problème.

Était-ce utile?

La solution

Quand une fonction est appelée en javascript, la première chose qui se passe est que l'interpréteur définit la chaîne d'étendue sur l'état dans lequel elle se trouvait lors de la définition de la fonction. Dans votre cas, la chaîne d'étendue ressemble à: 

   GLOBAL
     |
CAll addTableEvents 
     |
CALL onclick

Ainsi, lorsque la variable orderID est interceptée par l'interpréteur javascript, il recherche la variable dans la chaîne d'étendue. Il n'y a pas orderID défini dans votre fonction onclick , le point suivant à regarder est donc dans addTableEvents . Vous penseriez que orderID est défini ici, mais comme vous n'avez pas déclaré orderID avec le mot clé var, orderID est devenu une variable globale. orderID est introuvable dans addTableEvents . La dernière position à regarder est celle de GLOBAL, et sa valeur est la dernière à laquelle elle a été attribuée. Dans ce cas, c’est la dernière valeur de orderID = row.getAttributeNode ("id"). ) .value; dans la boucle for.

Pour voir cela plus clairement, regardez ce qui suit 

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

Le résultat d'un clic ici sera toujours égal à -1.

Donc, pour résoudre ce problème, je vous suggère de supprimer tout le code supplémentaire et inutile et d'utiliser quelque chose comme ce qui suit, 

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

}

Accédez simplement à l'attribut id directement à partir de l'objet appelé.

P.S. Je ne sais pas pourquoi votre code ne fonctionne pas dans IE (cela a fonctionné dans mon IE7).

Autres conseils

Pourquoi ne pas attacher le gestionnaire d’événements à la table et récupérer le rowindex de la cellule qui a déclenché l’événement click dans le gestionnaire de clics.

vous êtes beaucoup plus simple que ça!
peut évidemment être utilisé avec des lignes construites dynamiquement.
beaucoup d'amour,
qn. 

<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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top