Question

我有一个包含复选框的网格。我想选择grid被选中的checkbox的行。附带的屏幕截图。

需要您的帮助。我是Jquery的新手，仍然在学习。

Answer 1

您可以像这样用closest()方法编写它！

我们得到用input:checked检查的输入，然后使用最接近的方法找到tr的父级。

$('#check').on("click", function() {
  var checked = $('#asdf input:checked');
  console.log(checked.closest('tr'));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="asdf">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>$100</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>$1050</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>$1002</td>
  </tr>
</table>
<button id="check">check</button>

Answer 2

您可以尝试使用此代码

$(document).ready(function(){
  $(":checkbox").change(function() {
        $(this).closest("tr").toggleClass("pinkrow", this.checked)
    })
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
.pinkrow{
background-color:pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>

<table>
  <tr>
    <th>checkbox</th>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
     <td><input type="checkbox" name="tr1" value="tr1" class="checkboxs"> </td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="tr2" value="tr2" class="checkboxs"> </td>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="tr3" value="tr3" class="checkboxs"> </td>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
   <td><input type="checkbox" name="tr4" value="tr4" class="checkboxs"> </td>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
 
</table>

</body>
</html>

Answer 3

我不知道您是否正在使用该数据表的库。

但是使用jQuery，您可以执行以下操作。

下面的jQuery代码也可以与您的html结构一起使用。

$(".dataTable > tbody").find("tr td:first-child input[type='checkbox']:checked").each(function (){ 
   $(this).parent().parent().addClass("selected")
});

.selected >td{
background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="dataTable">
<tr>
<td>
<input type="checkbox" checked="checked" />
</td>
</tr>

<tr>
<td>
<input type="checkbox" />
</td>
</tr>

<tr>
<td>
<input type="checkbox" checked="checked" />
</td>
</tr>

</table>

如何选择在单击按钮的网格中选中复选框的行？

3 个答案: