单击复选框后获取每个tr的td值

时间:2017-11-28 03:10:39

标签: javascript jquery html

我正试图从我拥有的所有td中获取id。下面是我的html表

import re

astring = '[Embodied cognition - Wikipedia](https://en.wikipedia.org/wiki/Embodied_cognition)'
re.sub(r'[^A-Za-z0-9]+', ' ', astring)
# returns:
' Embodied cognition Wikipedia https en wikipedia org wiki Embodied cognition '

并在jquery函数中

<table class="dummyclass">
<tbody>
   <tr>
        <td>ID</td>
        <td>Status</td>
        <td>Description</td>
        <td><input type='checkbox' id='select_all'></td>
    </tr>
    <tr>
        <td>100</td>
        <td>TestStatus</td>
        <td>TestDescription</td>
    </tr>
    <tr>
        <td>101</td>
        <td>TestStatus1</td>
        <td>TestDescription1</td>
    </tr>
    </tbody>
  </table>

4 个答案:

答案 0 :(得分:1)

  1. 您应该将表格标题放在<thead></thead>
  2. 通过
  3. 获取ID

    $('tbody td:first-child').map(function(index,ele){
      return $(ele).text()
    }).toArray()

答案 1 :(得分:0)

您可以通过查看表格的第一列轻松抓住它。

检查一下:

$('tr').each(function() {
  console.log($(this).find('td:first').text());
})

答案 2 :(得分:0)

我认为这就是你想要的:

&#13;
&#13;
$('#select_all').on('click', function(evt) {
  var ids = [];
  var $cells = $('tbody td:first-child');

  $cells.each(function() {
    ids.push(parseInt($(this).text(), 10));
  });

  console.log(ids);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='button' id='select_all'>Select All</button>
  
<table>
  <thead>
    <th>ID</th>
    <th>Status</th>
    <th>Description</th>
  </thead>
  <tbody>
    <tr>
      <td>100</td>
      <td>TestStatus</td>
      <td>TestDescription</td>
    </tr>
    <tr>
      <td>101</td>
      <td>TestStatus1</td>
      <td>TestDescription1</td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;

请注意,我将您的复选框转换为<button>元素并将其移到表格之外,因为它是UI元素而不是表格数据。我还更新了表格以使用theadth来获得更好的可访问性,并且可以更轻松地排除标题单元格。

希望有所帮助!

P.S。如果您需要live()功能,则可以使用事件委派并执行$('body').on('click', '#select_all', function(evt) { … });

之类的操作

答案 3 :(得分:0)

live()已从最新版本的jQuery弃用。请尝试使用on,如下所示:

&#13;
&#13;
$('#select_all').on('click', function () {
  if(this.checked) {
    $('.dummyclass tr:not(:first-child) td:first-child').each(function(i, item){
      var id = $($(item)).text();
      console.log(id)
    });
  }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="dummyclass">
  <tbody>
   <tr>
        <td>ID</td>
        <td>Status</td>
        <td>Description</td>
        <td><input type='checkbox' id='select_all'></td>
    </tr>
    <tr>
        <td>100</td>
        <td>TestStatus</td>
        <td>TestDescription</td>
    </tr>
    <tr>
        <td>101</td>
        <td>TestStatus1</td>
        <td>TestDescription1</td>
    </tr>
    </tbody>
</table>
&#13;
&#13;
&#13;