获取tbody td

时间:2018-12-05 07:48:55

标签: javascript

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

<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,我在脚本上尝试了上面的代码。 但是警报确实没有任何价值。(空警报) 嗯...我打错了吗?

3 个答案:

答案 0 :(得分: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);
});

答案 1 :(得分:0)

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>

答案 2 :(得分:0)

您的脚本存在的问题是:

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