Question

我有一个包含struct结构的表，我想使用jquery在表中获取value row复选框。例如：

＆＃13;

<table border="1" width="100%">
    <thead>
        <tr>
            <td><input type='checkbox' />No</td>
            <td>Header Col2</td>
            <td>Header Col3</td>
        </tr>
    </thead>
    <tbody><tr>
<td><input  type="checkbox" class="chk" name="chk_id_local" id="bt_check" value="L01"/>&nbsp;1</td>
<td> Row 1</td>
<td> Row 1</td>
</tr>
        <tr>
<td><input  type="checkbox" class="chk" name="chk_id_local" id="bt_check" value="L02"/>&nbsp;2</td>
<td> Row 2</td>
<td> Row 22</td>
</tr>
        <tr>
<td><input  type="checkbox" class="chk" name="chk_id_local" id="bt_check" value="L03"/>&nbsp;3</td>
<td> Row 3</td>
<td> Row 333</td>
</tr>
    </tbody>
</table><br>
<button id="bt1">Get</button>

＆＃13;

现在，当我点击表格中的一行复选框时，我点击按钮获取，我将获得行跟随值。示例单击复选框行2并单击按钮获取，返回值为：L02,2，行2，行22。谢谢你的建议。

Answer 1

你可以这样做

$('#bt1').on('click', function () {
    //Get checked checkboxes
    var checkedCheckboxes = $("#tbl1 :checkbox:checked"),
        arr = [];

    //For each checkbox
    for (var i = 0; i < checkedCheckboxes.length; i++) {

        //Get checkbox
        var checkbox = $(checkedCheckboxes[i]);

        //Get checkbox value
        var checkboxValue = checkbox.val();

        //Get siblings
        var siblings = checkbox.parent().siblings();

        //Get values of siblings
        var value1 = $(siblings[0]).text();
        var value2 = $(siblings[1]).text();

        arr.push(checkboxValue + '-' + value1 + '/' + value2);
    }
});

对HTML的更改

为表格元素添加ID以优化选择。（见Optimize selectors）
为复选框提供唯一ID（上面的代码段不是必需的）

$('#bt1').on('click', function() {
  //Get checked checkboxes
  var checkedCheckboxes = $("#tbl1 :checkbox:checked"),
    arr = [];

  //For each checkbox
  for (var i = 0; i < checkedCheckboxes.length; i++) {

    //Get checkbox
    var checkbox = $(checkedCheckboxes[i]);

    //Get checkbox value
    var checkboxValue = checkbox.val();

    //Get siblings
    var siblings = checkbox.parent().siblings();

    //Get values of siblings
    var value1 = $(siblings[0]).text();
    var value2 = $(siblings[1]).text();

    arr.push(checkboxValue + '-' + value1 + '/' + value2);
    alert(checkboxValue + '-' + value1 + '/' + value2);

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1" border="1" width="100%">
  <thead>
    <tr>
      <td>
        <input type='checkbox' />No</td>
      <td>Header Col2</td>
      <td>Header Col3</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" class="chk" name="chk_id_local" id="bt_check1" value="L01" />&nbsp;1</td>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="chk" name="chk_id_local" id="bt_check2" value="L02" />&nbsp;2</td>
      <td>Row 2</td>
      <td>Row 22</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="chk" name="chk_id_local" id="bt_check3" value="L03" />&nbsp;3</td>
      <td>Row 3</td>
      <td>Row 333</td>
    </tr>
  </tbody>
</table>
<br>
<button id="bt1">Get</button>

如何使用Jquery在表中检查值和文本行？

1 个答案: