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

一行的示例可以是

＆＃13;

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

＆＃13;

Answer 3

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

Answer 4

您可以使用event delegation

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

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

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

如何在点击中获取表中行的第一个值？

4 个答案: