Question

我有一个html表，我正在尝试使用第二列中的值形成一个列表（在第一列中选中复选框）。

我尝试了很多使用jQuery的方法，但没有任何作用。

HTML

<table id="table1">
    <tr>
         <td><input type="checkbox"/></td>
         <td>12</td>
    </tr>

    <tr>
        <td><input type="checkbox"/></td>
        <td>13</td>
    </tr>

 </table>

 <input id="submit-btn" type="button" style="submit-btn" >

的jQuery

values =[];

$("#submit-btn").click(function() {
    $('#table1 tr').each(function () {
        row = $(this);

        if(row.children('td:eq(0) > checkbox').prop('checked'))
        {
            values.push(row.children('td:eq(1)').text());
            console.log(values);
        }
    }); 
});

Answer 1

您可以使用jQuery＆＃39; :checked pseudo-selector查找表格中所有选中的复选框，然后使用closest前往td他们所在的next，{ {1}}移至下一个td，text获取td的文字：

$("#table1 input:checked").each(function() {
    values.push($(this).closest("td").next().text());
});

直播示例：

＆＃13;

$("#submit-btn").click(function() {
  var values = [];
  $("#table1 input:checked").each(function() {
    values.push($(this).closest("td").next().text());
  });
  console.log(values);
});

＆＃13;

<table id="table1">
  <tr>
    <td><input type="checkbox" /></td>
    <td>12</td>
  </tr>

  <tr>
    <td><input type="checkbox" /></td>
    <td>13</td>
  </tr>

</table>

<input id="submit-btn" type="button" style="submit-btn">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

您的方法无效，原因有两个：

td:eq(0) > checkbox查找<td><checkbox ..>元素。标记为input（具体而言，它是input[type=checkbox]），而不是checkbox。
修复后，tr元素的子与td:eq(0) > input[type=checkbox]匹配，因此row.children("td:eq(0) > input[type=checkbox]")会返回一个空集。复选框不是行的子，td是。（复选框是后代，但不是子项。）

如果你解决了这两个问题，你的方法就会奏效：

＆＃13;

$("#submit-btn").click(function() {
  var values = [];
  $('#table1 tr').each(function() {
    var row = $(this);
    if (row.find('td:eq(0) > input[type=checkbox]').prop('checked')) {
      values.push(row.children('td:eq(1)').text());
    }
  });
  console.log(values);
});

＆＃13;

<table id="table1">
  <tr>
    <td><input type="checkbox" /></td>
    <td>12</td>
  </tr>

  <tr>
    <td><input type="checkbox" /></td>
    <td>13</td>
  </tr>

</table>

<input id="submit-btn" type="button" style="submit-btn">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

...但是使用:checked会将更多工作留给jQuery的优化代码。

从复选框选中属性的表格中选择单元格值

1 个答案: