テーブル行をクリックしてすべてのセルの値を取得

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を追加したり、複数のイベントハンドラをテーブルに追加する必要はありません。ワンクリックイベントがすべて必要です。また、あなたのテーブルのためにtheadと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); 
      }; 
     } 
    } 
}