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

Question

我试图在用户点击“click”时获取每个tr中第一个td的值。

下面的结果将输出aa，ee或ii。我考虑使用closest('tr')..但它总是输出“Object object”。对于这个问题不太确定该怎么办。

我的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)  ;

});

- FlyingCat

Answer 1

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

< p > parent 取得链接周围的<td>，

siblings 取得同一<tr>中所有的<td>标签，

:first 返回匹配集合中第一个元素。

text() 返回标签的内容。

- Tesserex

---

对我也很有帮助！我一直在苦苦寻找如何获取第一个td中的文本，然后发现了这个小宝石！太棒了！ - Venu K

Answer 2

这个应该可以工作：

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

说明：

• .closest('tr') 获取最近的祖先元素，该元素是一个<tr>元素（因此在这种情况下，它是包含 <a> 元素的行）。
• .children('td:first') 获取此元素的所有子元素，但使用:first选择器将其减少为第一个<td>元素。
• .text() 获取元素内的文本。

---

正如您从其他答案中看到的，有不止一种方法可以完成这个任务。

- Felix Kling

---

你们都回答得很正确！既然你们已经有了16K，而Tesserex先回复了我。我将把采纳的答案给予Tesserex。非常感谢！+1给你们所有人。 - FlyingCat

".children('td:first')" 正是我所需要的。 - radbyx

Answer 3

在上述特定情况下，您可以进行父/子级交换操作。

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

- Inaimathi

---

"closest" 只会查找当前元素的祖先元素。你的第二个例子不会起作用。而你的第一个例子也不行，因为 "parent()" 只会在 DOM 层次结构中向上遍历一级（你可能是想使用 "parents()"）。 - Felix Kling

Answer 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")，因为它非常低效。尝试改用事件委托。

- Caleb

---

我认为OP想要获取当前行第一个单元格的值，而不是所有行的值。 - Felix Kling

Answer 5

安装Firebug并使用console.log代替alert。然后你将看到你正在访问的确切元素。

- Marc

Answer 6

如果您需要获取行内所有td元素而不为它们定义id，可以使用下面的代码：

var items = new Array();

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

以上代码将把表格中所有第一个单元格添加到一个数组变量中。

您可以更改 nth-child(1)，它表示第一个单元格，以满足您的需要。

希望这段代码对您有所帮助。

- Shadmehr Vadoodi