如何在单击时获取表中行的第一个值

How to get first value of row in table on click?

本文关键字：第一个 获取 单击      更新时间：2023-09-26

我有一个带有第一个数字列的表：

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

但我不想手动将事件添加到每一行，因为我的表有数十亿条记录。请帮帮我。如何在单击行时获得行值（第一列）？

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

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

一行的示例可以是

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

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

您可以使用事件委派

var table = document.getElementsByTagName('table')[0];
function getValue(){
  console.log(event.target.parentElement.firstElementChild.innerText);
}
table.addEventListener('click', getValue, false);
相关文章：