Cliquez sur la ligne du tableau et obtenir la valeur de toutes les cellules

Question

Je ne connais pas JQuery, donc j'espère qu'il y a un moyen de le faire en javascript pur.

Je dois cliquer sur une ligne de tableau et obtenir la valeur de chaque cellule de cette ligne. Voici le format de ma table:

<table class='list'> 
    <tr> 
     <th class='tech'>OCB</th> 
     <th class='area'>Area</th> 
     <th class='name'>Name</th> 
     <th class='cell'>Cell #</th> 
     <th class='nick'>Nickname</th> 
    </tr> 
    <tr onclick="somefunction()"> 
     <td>275</td> 
     <td>Layton Installation</td> 
     <td>Benjamin Lloyd</td> 
     <td>(801) 123-456</td> 
     <td>Ben</td> 
    </tr> 
</table> 

Y a-t-il un moyen de mettre un identifiant unique dans chaque cellule?

Answer 1

Il n'est pas nécessaire d'ajouter des ID ou d'ajouter plusieurs gestionnaires d'événements à la table. Un seul clic est tout ce qui est nécessaire. Vous devez également utiliser thead et tbody pour vos tables afin de séparer l'en-tête du contenu.

HTML:

<table class='list'> 
    <thead> 
     <tr> 
      <th class='tech'>OCB</th> 
      <th class='area'>Area</th> 
      <th class='name'>Name</th> 
      <th class='cell'>Cell #</th> 
      <th class='nick'>Nickname</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>275</td> 
      <td>Layton Installation</td> 
      <td>Benjamin Lloyd</td> 
      <td>(801) 123-456</td> 
      <td>Ben</td> 
     </tr> 
    </tbody> 
</table> 

JavaScript:

var table = document.getElementsByTagName("table")[0]; 
var tbody = table.getElementsByTagName("tbody")[0]; 
tbody.onclick = function (e) { 
    e = e || window.event; 
    var data = []; 
    var target = e.srcElement || e.target; 
    while (target && target.nodeName !== "TR") { 
     target = target.parentNode; 
    } 
    if (target) { 
     var cells = target.getElementsByTagName("td"); 
     for (var i = 0; i < cells.length; i++) { 
      data.push(cells[i].innerHTML); 
     } 
    } 
    alert(data); 
}; 

Exemple:

http://jsfiddle.net/ZpCWD/

Answer 2

var elements = document.getElementsByTagName('td'); 
for (var i =0; i < elements.length; i++) { 
    var cell_id = 'id' + i; 
    elements[i].setAttribute('id', cell_id); 
} 

Peut-être mettre quelque chose comme ça dans la fonction de vos liens onclick à partir du tr?

Answer 3

Vérifiez ce violon link

HTML:

<table id="rowCtr" class='list'> 
    <thead> 
     <tr> 
      <th class='tech'>OCB</th> 
      <th class='area'>Area</th> 
      <th class='name'>Name</th> 
      <th class='cell'>Cell #</th> 
      <th class='nick'>Nickname</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>275</td> 
      <td>Layton Installation</td> 
      <td>Benjamin Lloyd</td> 
      <td>(801) 123-456</td> 
      <td>Ben</td> 
     </tr> 
    </tbody> 
</table> 

JAVASCRIPT:

init(); 
function init(){ 

    addRowHandlers('rowCtr'); 

} 

function addRowHandlers(tableId) { 
    if(document.getElementById(tableId)!=null){ 
     var table = document.getElementById(tableId); 
     var rows = table.getElementsByTagName('tr'); 
     var ocb = ''; 
     var area = ''; 
     var name = ''; 
     var cell = ''; 
     var nick = ''; 
     for (var i = 1; i < rows.length; i++) { 

      rows[i].i = i; 
      rows[i].onclick = function() { 

       ocb = table.rows[this.i].cells[0].innerHTML;     
       area = table.rows[this.i].cells[1].innerHTML; 
       name = table.rows[this.i].cells[2].innerHTML; 
       cell = table.rows[this.i].cells[3].innerHTML; 
       nick = table.rows[this.i].cells[4].innerHTML; 
       alert('ocb: '+ocb+' area: '+area+' name: '+name+' cell: '+cell+' nick: '+nick); 
      }; 
     } 
    } 
}