Question

我看到了其他问题和答案，无法满足我的需要。

<thead>
  <tr>
    <td>a2</td>
    <td>a2</td>
  </tr>
<tbody>
  <tr>
    <td>a2</td>
    <td>a2</td>
  </tr>
  <tr>
    <td>4d</td>
    <td>a23</td>
  </tr>
</tbody>

<script>
$('tr').on("click", function(){
    var id = $(this).find('tbody tr td').eq(2).text(); //here
    alert(id);
});
</script>

我想获取tbody td而不是thead td，我在脚本上尝试了上面的代码。但是警报确实没有任何价值。（空警报）嗯...我打错了吗？

Answer 1

以下脚本将获取td中第一个tbody tr的值

<table>
<thead>
  <tr>
    <td>a2</td>
    <td>a2</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td>a2</td>
    <td>a2</td>
  </tr>
  <tr>
    <td>4d</td>
    <td>a23</td>
  </tr>
</tbody>
</table>
<script>
$('tbody tr').on("click", function(){
    var id = $(this).find('td:first-child').text(); //here
    alert(id);
});
</script>

如果您想获得每次点击的td的值，可以使用：

$('tbody td').on("click", function(){
    var id = $(this).text(); //here
    alert(id);
});

Answer 2

jQuery处理程序中的

this将引用触发事件的元素-您正在使用$('tr').on，因此this将引用tr。但是tr个孩子没有tbody个孩子，因此$(this).find('tbody ...不起作用。相反，由于您是从tr开始，因此只需.find td个。另请注意，由于每个td中只有两个个tr，所以.eq(2)始终为空（类似数组的集合在Javascript中为零索引） -如果要第二个td的文本，则应改用.eq(1)。

$('tr').on("click", function() {
  var id = $(this).find('td').eq(1).text();
  console.log(id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>a2</td>
      <td>a2</td>
    </tr>
    <tbody>
      <tr>
        <td>a2</td>
        <td>a2</td>
      </tr>
      <tr>
        <td>4d</td>
        <td>a23</td>
      </tr>
    </tbody>
</table>

Answer 3

您的脚本存在的问题是：

<script>
 $('tr').on("click", function(){
 var id = $(this).find('tbody tr td').eq(2).text(); //here
 alert(id);
});
</script>

1）您所指的列2不存在。 2）此外，编写“ find（'tbody tr td'）”将在您要搜索的“ $（'tr'）。on（“ click”，function（）“内搜索另一个tbody tr和td标签，也不存在，因此警报返回空白。因此请尝试使用此脚本，让我知道它是否有效！

<script>
  $('tbody tr').on("click", function(){
   var id = $(this).find('td').eq(0).text(); 
   alert(id);
  });
</script>

获取tbody td

3 个答案: