Kliknij wiersz tabeli i uzyskaj wartość wszystkich komórek

Question

Nie znam JQuery, więc mam nadzieję, że istnieje sposób na zrobienie tego w czystym javascript.

Muszę kliknąć wiersz tabeli i uzyskać wartość każdej komórki w tym wierszu. Oto format mojego stolika:

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

Czy w każdym ogniwie brakuje jednoznacznego identyfikatora?

Answer 1

Nie ma potrzeby dodawania identyfikatorów lub dodawania wielu programów obsługi zdarzeń do tabeli. Zdarzenie jednym kliknięciem to wszystko, czego potrzeba. Powinieneś także użyć thead i tbody do swoich tabel, aby oddzielić nagłówek od treści.

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

Przykład:

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

Może umieścić coś takiego w funkcji swoich linków onclick do z tr?

Answer 3

Sprawdź to skrzypce 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); 
      }; 
     } 
    } 
}