单击表格行并获取所有单元格的值

Question

我不知道JQuery，所以我希望有一种方法可以在纯JavaScript中执行此操作。

我需要单击一个表格行并获取该行中每个单元格的值。这里是我的表的格式：

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

反正有没有把每个单元格的唯一ID？

Answer 1

没有必要添加id或将多个事件处理程序添加到表中。一键式事件就是所需要的。你也应该使用表格的add和tbody来将标题从内容中分离出来。

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

例子：

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

也许把这样的东西放在函数中，你的onclick链接从tr？

Answer 3

检查这个小提琴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); 
      }; 
     } 
    } 
}