JavaScript pour ajouter des lignes de table événement onclick

Je suis nouveau sur le Javascript. Je veux ajouter un événement onclick de lignes de la table. Je ne suis pas à l'aide de JQuery.

Je boucle à travers les lignes et utiliser une fermeture pour m'assurer d'avoir l'état de la fonction externe pour chaque ligne.
La boucle fonctionne. L'utilisation d'alertes, je vois la fonction attribuée à chaque itération. Mais quand je clique sur la ligne, aucune alerte ne s'affiche.
Ci-dessous est le code HTML et le code qui peut être chargé.

Pourquoi la ligne de la table des événements à ne pas travailler?

<!doctype html>
<html lang="en">
<body>
<script>
function example4() {
    var table = document.getElementById("tableid4");
    var rows = table.getElementsByTagName("tr");
    for (var i = 0; i < rows.length; i++) {
        var curRow = table.rows[i];
        //get cell data from first col of row
        var cell = curRow.getElementsByTagName("td")[0];
        curRow.onclick = function() {
            return function() {
                alert("row " + i + " data="+ cell.innerHTML);
            };
        };
    }
}
function init() { example4(); }
window.onload = init;   
</script>
<div>
Use loop to assign onclick handler for each table row in DOM. Uses Closure.
    <table id="tableid4" border=1>
      <tbody>
        <tr><td>Item one</td></tr>
        <tr><td>Item two</td></tr>
        <tr><td>Item three</td></tr>
      </tbody>
    </table>
</div>
</body>
</html>
  • Vous êtes de retour d'une fonction dans une fonction. Cela nécessiterait pour une autre fonction au sein de la onclick pour appeler la fonction renvoyée.
  • Cette question n'a vraiment rien à voir avec les fermetures.
  • Je suis, en utilisant les fermetures, car je veux le cas de retour de la ligne qui a été cliqué. Sur une version antérieure du code, j'ai continué à obtenir de la ligne 3 toujours retourné. Ma compréhension est que la fermeture permettra de résoudre ce problème.
  • Vous comprenez correctement
InformationsquelleAutor Alex_B | 2012-12-26
  1. 9

    Cela semble être la manière canonique

    DÉMO

    function example4() {
    var table = document.getElementById("tableid4");
    var rows = table.rows; //or table.getElementsByTagName("tr");
    for (var i = 0; i < rows.length; i++) {
        rows[i].onclick = (function() { //closure
            var cnt = i; //save the counter to use in the function
            return function() {
              alert("row"+cnt+" data="+this.cells[0].innerHTML);
            }    
        })(i);
    }
}
window.onload = function() { example4(); }​

    Mise à JOUR: @ParkerSuperstar suggéré que le " je " dans (i) n'est pas nécessaire.
    Je n'ai pas testé mais sa violon semble fonctionner.

    • J'essaie de comprendre comment cela fonctionne. Vous avez fait deux choses. 1) Vous avez ci-joint la fonction externe dans parens et ajouté un paramètre que je. 2) Vous avez enregistré j'ai comme cnt dans la fonction externe, de sorte que maintenant la fonction interne voit cnt. Je ne comprends pas pourquoi la fonction interne ne voit pas je.
    • C'est exactement ce que une fermeture n'. La première fonction prend une copie qui reste statique à l'intérieur de la fonction interne
    InformationsquelleAutor mplungjan
  2. 1

    Je ne suis pas tout à fait sûr de savoir pourquoi vous êtes à l'aide d'une fermeture ici, pourrais-tu être un peu plus élaboré?

    La raison pour laquelle vous ne voyez pas l'alerte désirée est parce que dans le onclick de la fonction, vous êtes de retour d'une fonction. I. e:

    window.onload = function() {
    return function() {
        alert("Closure... why?");
    };
};

    Quelque chose comme cela ne peut pas vraiment travailler, parce que vous n'êtes jamais à l'appel de la fonction imbriquée... à essayer sans l'aide de la fermeture, ou un commentaire expliquant pourquoi vous voulez une fermeture parce que vous êtes explication n'a pas beaucoup de sens pour moi.

    • Je veux par la suite le retour de la ligne de l'information lorsque la ligne est cliqué. J'ai pensé à la façon dont je imbriquée un retour de f() à l'intérieur d'une fonction, la fonction interne sur la portée de l'extérieur de la fonction de variables, ce qui me donne accès à la ligne d'information. Je voulais l'alerte pour me montrer cette information.
    InformationsquelleAutor jeremy
  3. 0

    Vous avez juste à supprimer une fonction supplémentaire et le script sera comme ceci 

    <script>
 function example4() {
    var table = document.getElementById("tableid4");
cells = table.getElementsByTagName('td');

 for (var i=0,len=cells.length; i<len; i++){
 cells[i].onclick = function(){
    alert(this.innerHTML);

}
 }
}
 function init() { example4(); }
 window.onload = init;   
 </script>
    • comment est-ce différent (en plus de l'évident moins informatif facteur) de ma réponse?
    • Il n'est pas et ne fonctionnera pas. Il alertera row3 à chaque fois jsfiddle.net/mplungjan/zwW4a
    • Qui alerte tout le contenu d'une cellule lorsqu'une cellule est cliqué, et de ne pas savoir dont le numéro de ligne a été cliqué
    InformationsquelleAutor zafus_coder