單擊時如何獲取表中行的第一個值？

Question

我有一個帶有第一個數字列的表：

<table id="toppings"  border="1" cellpadding="2">
   <tr id="id1">
      <td>3</td>
      <td>row12</td>
      <td>row13</td>
  </tr>
  <tr id="id2">
      <td>12</td>
      <td>row22</td>
      <td>row23</td>
  </tr>
  <tr id="id3">
      <td>15</td>
      <td>row32</td>
      <td>row33</td>
  </tr>
  <tr id="id4">
      <td>22</td>
      <td>row42</td>
      <td>row43</td>
 </tr>
 <tr id="id5">
      <td>23</td>
      <td>row52</td>
      <td>row53</td>
 </tr>
 <tr id="id6">
   <td>55</td>
   <td>row62</td>
   <td>row63</td>
 </tr>
</table>

如何在單擊行時獲取行的第一個值/列。 我發現以下示例執行相同操作。

http://www.vbforums.com/showthread.php?522104-HTML-table-on-click-event

但是我不想手動將事件添加到每一行，因為我的表有數十億條記錄。 請幫我。 如何在單擊行時獲得行值（第一列）？

Answer 1

$("#toppings tr").click(function(){
   alert( $(this).children().closest("td").html());
});

小提琴： http ： //jsfiddle.net/k1ezbcrk/

Answer 2

一行的示例可能是

 <tr id="id2"> <td><a href="#" onclick="getColumnValue(this)">12</a></td> <td>row22</td> <td>row23</td> </tr> <script> function getColumnValue(elem){ alert(elem.innerHTML); } </script> 

Answer 3

  $("#toppings tr").click(function(){
      alert( $(this).children().first().html());
  });

Answer 4

您可以使用事件委托

var table = document.getElementsByTagName('table')[0];

function getValue(){
  console.log(event.target.parentElement.firstElementChild.innerText);
}

table.addEventListener('click', getValue, false);