Jquery-获取表中第一个td的值

时间:2010-05-28 17:37:59

标签: jquery select html-table

当用户点击“点击”时,我试图获得每个tr中第一个td的值。

以下结果将输出aa,ee或ii。我正在考虑使用最近的('tr')..但它总是输出“对象对象”。不知道该怎么做。

我的HTML是

 <table>
   <tr>
      <td>aa</td>
      <td>bb</td>
      <td>cc</td>
      <td>dd</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
   <tr>
      <td>ee</td>
      <td>ff</td>
      <td>gg</td>
      <td>hh</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
   <tr>
      <td>ii</td>
      <td>jj</td>
      <td>kk</td>
      <td>ll</td>
      <td><a href="#" class="hit">click</a></td>
   </tr>
</table>

Jquery的

$(".hit").click(function(){

 var value=$(this).// not sure what to do here

 alert(value)  ;

});

6 个答案:

答案 0 :(得分:60)

$(this).parent().siblings(":first").text()

parent为您提供链接周围的<td>

siblings提供<td>

中的所有<tr>个标记

:first给出集合中第一个匹配的元素。

text()给出了标记的内容。

答案 1 :(得分:39)

这应该有效:

$(".hit").click(function(){    
   var value=$(this).closest('tr').children('td:first').text();
   alert(value);    
});

<强>解释

  • .closest('tr')获取最近的祖先,它是<tr>元素(因此在这种情况下是<a>元素所在的行)。
  • .children('td:first')获取此元素的所有子元素,但使用:first选择器,我们将其缩减为第一个<td>元素。
  • .text()获取元素
  • 中的文字

从其他答案中可以看出,实现这一目标的方法不止一种。

答案 2 :(得分:10)

在上面的具体情况中,你可以做父/子杂耍。

$(this).parents("tr").children("td:first").text()

答案 3 :(得分:4)

$(".hit").click(function(){
   var values = [];
   var table = $(this).closest("table");
   table.find("tr").each(function() {
      values.push($(this).find("td:first").html());
   });

   alert(values);    
});

你应该避免$(".hit")它真的效率低下。请尝试使用事件委派。

答案 4 :(得分:3)

安装firebug并使用console.log代替alert。然后,您将看到您访问的确切元素。

答案 5 :(得分:2)

如果你需要在没有为他们定义id的情况下获取tr内的所有td,你可以使用下面的代码:

var items = new Array();

$('#TABLE_ID td:nth-child(1)').each(function () {
      items.push($(this).html());
});

上面的代码会将Table中的所有第一个单元格添加到Array变量中。

您可以更改 nth-child(1),这意味着您需要的任何单元格编号的第一个单元格。

希望此代码可以帮助您。