使用 jQuery 检索 td 隐藏单元格答案

【问题标题】：Retrieving td hidden cell using jQuery使用 jQuery 检索 td 隐藏单元格
【发布时间】：2011-04-11 05:51:23
【问题描述】：

我有下表：

<table id="mytable">
<tr> 
<th class="hidden">id</th> 
<th>name</th> 
</tr> 
<tr> 
<td class="hidden">87</td> 
<td>Isle of Palms</td> 
</tr> 
</table>

然后这个 jQuery 代码隐藏 id 列：

<script> 
$(function() {
$('.hidden').hide();
});
</script>

单击任何行时，我需要获取 id 单元格隐藏值，但找不到正确的选择器。任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： jquery hidden html-table

【解决方案1】：

试试这个：

$('tr').click(function () {

     var id = $(this).find('td.hidden').html();
});

更新

$('tr').click(function () {

     var id = $(this).find('td.hidden:first').html();
});

如果您有很多列并且想要选择第一列，您可以使用:first。请记住，这将为表格中的所有行添加点击事件。我想您只对 tbody 中的行感兴趣，而您的示例没有。所以我会这样做：

<table id="mytable">
  <thead>  
    <tr> 
      <th class="hidden">id</th> 
      <th>name</th> 
    </tr>
  </thead>
  <tbody> 
    <tr> 
      <td class="hidden">87</td> 
      <td>Isle of Palms</td> 
    </tr> 
  </tbody>
</table>

然后为 tbody 行设置点击事件

$('tbody tr').click(function () {

     var id = $(this).find('td.hidden:first').html();
});

希望有帮助！

【讨论】：

嗯...实际上您的代码适用于我发布的示例。对不起我的最后评论。但这对我的真正问题不起作用。我正在使用一个有 15 列的表，其中 7 列是隐藏的，我需要获取第一个隐藏列，它是 id。最好的问候。
我做到了。感谢您的关注。您的两个解决方案都适用于我发布的代码。但是在我点击的每一行的真实代码中，我都得到了空值。代码基本相同......只是更多的列。诡异的。无论如何谢谢;）
你能复制/粘贴真实的表格吗？
不需要...有效！该类在真实事物中有另一个名称。我认为 hidden 是某种“保留词”。太感谢了！！！我对 jQuery 还很陌生，而且我已经挣扎了好几个小时了。
hidden 是输入时的保留字 => type="hidden"。无论如何，如果我的答案是正确的，请检查它。

【解决方案2】：

我假设你是<td class="hidden">87</td> 或87 中的.text()

您可以在<tr/> 上注册一个点击处理程序，然后找到您的<td/>

$("tr").click(function(){
    var $idCell = $(this).find("td.hidden");
    if($idCell.length == 1)
    {
      var id = $idCell.text();
    }
});

编辑

更好的选择可能是使用.filter()，这样您就只注册有子<td class="hidden"/>的事件处理程序

$("tr").filter(function(){
    return $(this).children("td.hidden").length == 1;
}).click(function(){
    alert($(this).find("td.hidden").text());
});

【讨论】：

那行得通！或者他实际上可以编写 W3C 标准的 thead 和 tbody。然后像这样设置点击事件 => $('tbody tr').click(function() { ... });
谢谢，但它不起作用。请问 .length == 1 是什么意思？抱歉还在学习；）
这只是一种确保返回的结果集中只有一个隐藏的 td 的方法。如果您遇到问题，请在 jsfiddle.net 上发布更强大的示例以查看您的问题所在。