web-dev-qa-db-fra.com

Ajout d'un événement onclick à une ligne de table

J'essaie d'ajouter un événement onclick à une ligne de la table via Javascript.

function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 1; i < rows.length; i++) {
        row = table.rows[i];
        row.onclick = function(){
                          var cell = this.getElementsByTagName("td")[0];
                          var id = cell.innerHTML;
                          alert("id:" + id);
                      };
    }
}

Cela fonctionne comme prévu dans Firefox, mais dans Internet Explorer (IE8), je ne peux pas accéder aux cellules du tableau. Je pense que cela est en quelque sorte lié au fait que "ceci" dans la fonction onclick est identifié comme "Window" au lieu de "Table" (ou quelque chose comme ça).

Si je pouvais accéder à la ligne en cours, je pourrais exécuter getElementById dans la fonction onclick en ne trouvant aucun moyen de le faire. Aucune suggestion?

Merci!

javascripthtmldomjavascript-events
25
user80978

Quelque chose comme ça.

function addRowHandlers() {
  var table = document.getElementById("tableId");
  var rows = table.getElementsByTagName("tr");
  for (i = 0; i < rows.length; i++) {
    var currentRow = table.rows[i];
    var createClickHandler = function(row) {
      return function() {
        var cell = row.getElementsByTagName("td")[0];
        var id = cell.innerHTML;
        alert("id:" + id);
      };
    };
    currentRow.onclick = createClickHandler(currentRow);
  }
}

MODIFIER

Travailler demo . 

34
SolutionYogi

Je pense que pour IE, vous devrez utiliser la propriété srcElement de l'objet Event . Si jQuery est une option pour vous, vous pouvez envisager de l’utiliser, car elle résume la plupart des différences entre les navigateurs. Exemple jQuery:

$("#tableId tr").click(function() {
   alert($(this).children("td").html());
});
3
Nick Riggs

Voici une version compacte et légèrement plus propre de la même solution pure Javascript (pas un jQuery) comme discuté ci-dessus par @redsquare et @SolutionYogi (à propos de l'ajout de gestionnaires d'événements onclick à tous les tableaux HTML lignes) qui fonctionne dans tous les principaux navigateurs Web, y compris le dernier IE11:

function addRowHandlers() {
    var rows = document.getElementById("tableId").rows;
    for (i = 0; i < rows.length; i++) {
        rows[i].onclick = function(){ return function(){
               var id = this.cells[0].innerHTML;
               alert("id:" + id);
        };}(rows[i]);
    }
}
window.onload = addRowHandlers();

Travailler DEMO

Note: pour que cela fonctionne également dans IE8, au lieu de this pointeur, utilisez l'identifiant explicite comme function(myrow), comme suggéré par @redsquare .

1
Alexander Bell

La tête coincée dans le jq depuis trop longtemps. Cela fonctionnera.

function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 1; i < rows.length; i++) {
        var row = table.rows[i];
        row.onclick = function(myrow){
                          return function() { 
                             var cell = myrow.getElementsByTagName("td")[0];
                             var id = cell.innerHTML;
                             alert("id:" + id);
                      };
                  }(row);
    }
}
1
redsquare

Un moyen simple est de générer le code ci-dessous: 

<!DOCTYPE html>
<html>
<head>

<style>
  table, td {
      border:1px solid black;
  }
</style>

</head>
<body>
<p>Click on each tr element to alert its index position in the table:</p>
<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
  function myFunction(x) {
      alert("Row index is: " + x.rowIndex);
  }
</script>

</body>
</html>

0
Zolfaghari

Voici comment je fais cela. Je crée une table avec une balise thead et tbody ..__, puis j'ajoute un événement click à l'élément tbody par id.

<script>
    document.getElementById("mytbody").click = clickfunc;
    function clickfunc(e) {
        // to find what td element has the data you are looking for
        var tdele = e.target.parentNode.children[x].innerHTML;
        // to find the row
        var trele = e.target.parentNode;
    }
</script>
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody id="mytbody">
        <tr><td>Data Row</td><td>1</td></tr>
        <tr><td>Data Row</td><td>2</td></tr>
        <tr><td>Data Row</td><td>3</td></tr>
    </tbody>
</table>
0
user3121053

Ma table est dans un autre iframe, donc j'ai modifié SolutionYogi answer to work with that: 

<script type="text/javascript">
window.onload = addRowHandlers;
function addRowHandlers() {
    var iframe = document.getElementById('myiframe');
    var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

    var table = innerDoc.getElementById("mytable");
    var rows = table.getElementsByTagName("tr");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row) 
            {
                return function() { 
                                        var cell = row.getElementsByTagName("td")[0];
                                        var id = cell.innerHTML;
                                        alert("id:" + id);
                                 };
            }

        currentRow.onclick = createClickHandler(currentRow);
    }
}
</script>
0
Fco Javier Rod Ca

J'essayais de sélectionner une ligne de tableau afin qu'elle puisse être facilement copiée dans le presse-papiers, puis collée dans Excel. Vous trouverez ci-dessous une petite adaptation de votre solution.

Références:

<!DOCTYPE html>
<html>
<body>

<div>
    <table id="tableId" border=1>
      <tbody>
        <tr><td>Item <b>A1</b></td><td>Item <b>B1</b></td></tr>
        <tr><td>Item <b>A2</b></td><td>Item <b>B2</b></td></tr>
        <tr><td>Item <b>A3</b></td><td>Item <b>B3</b></td></tr>
      </tbody>
    </table>
</div>

<script>
function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row) 
            {
                return function() { 
                                        var cell = row.getElementsByTagName("td")[0];
                                        var id = cell.innerHTML;

                                        var cell1 = row.getElementsByTagName("td")[1];
                                        var id2 = cell1.innerHTML;
                                        // alert(id + " - " + id2);
                                        window.Prompt("Copy to clipboard: Ctrl+C, Enter", "<table><tr><td>" + id + "</td><td>" + id2 + "</td></tr></table>")
                                 };
            };

        currentRow.onclick = createClickHandler(currentRow);
    }
}
window.onload = addRowHandlers();
</script>
</body>
</html>
0
robertocm

Essayez de changer la ligne this.getElementsByTagName("td")[0]) pour lire row.getElementsByTagName("td")[0];. Cela devrait capturer la référence row dans une fermeture, et cela devrait fonctionner comme prévu.

Éditer: Ce qui précède est faux, puisque la ligne est une variable globale - allouez une nouvelle variable, comme d’autres, puis utilisez QUE dans la fermeture. 

0
Luke Rinard