Klicken Sie auf die Tabellenzeile und erhalten Sie den Wert aller Zellen

Question

Ich weiß nicht, JQuery, so hoffe ich gibt es eine Möglichkeit, dies in reinem Javascript zu tun.

Ich muss auf eine Tabellenzeile klicken und den Wert jeder Zelle in dieser Zeile abrufen. Hier ist das Format meiner Tabelle:

<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> 

Ist es sowieso kurz, eine eindeutige ID zu jeder Zelle zu setzen?

Answer 1

Es müssen keine IDs hinzugefügt oder mehrere Event-Handler zur Tabelle hinzugefügt werden. Ein Klick-Ereignis ist alles was benötigt wird. Außerdem sollten Sie thead und tbody für Ihre Tabellen verwenden, um die Überschrift vom Inhalt zu trennen.

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

Beispiel:

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

Vielleicht etwas so in Funktion setzen Ihre onclick Links zu der tr?

Answer 3

prüfen diese Geige 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); 
      }; 
     } 
    } 
}