我已经在HTML表中动态创建了复选框,如以下代码所示。我试图通过在另一个按钮click()函数上使用以下代码行来隐藏未选中其复选框的行。
$(document).on("click", "#allotBtn", function() {
$('#studentListBody tr [type="checkbox"]').each(function(i, chk) {
if (!chk.checked) {
$("#studentList tr:nth-child(" + i + ")").css("display", "none");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody id="studentListBody">
<tr role="row" class="odd">
<td class="centeralign hideFirstTD sorting_1">
<div class="checkbox checkbox-success ">
<input class="commoncheckbox" type="checkbox" id="studentId_-5ab87edaff24ae1204000857" name="studentId_-5ab87edaff24ae1204000857" value="5ab87edaff24ae1204000857">
<label></label>
</div>
</td>
<td class=" align-middle ">
<img alt="image" class="img-circle listProfilePicture" src="../img/studentcap.png">
</td>
<td>Raja Mir</td>
<td>7th</td>
<td>Male</td>
<td>Active</td>
<td>2016</td>
</tr>
<tr role="row" class="even">
<td class="centeralign hideFirstTD sorting_1">
<div class="checkbox checkbox-success ">
<input class="commoncheckbox" type="checkbox" id="studentId_-5ab8d5f8ff24ae120400085f" name="studentId_-5ab8d5f8ff24ae120400085f" value="5ab8d5f8ff24ae120400085f">
<label></label>
</div>
</td>
<td class=" align-middle ">
<img alt="image" class="img-circle listProfilePicture" src="../img/studentcap.png">
</td>
<td>Omer Jan</td>
<td>4th</td>
<td>Male</td>
<td>Active</td>
<td>2018</td>
</tr>
</tbody>
如果表中有3行以上,则上面的代码会随意隐藏行。
请帮助!!!
答案 0 :(得分:3)
尝试一下:
$("#allotBtn").click(function(){
$('#studentListBody tr [type="checkbox"]:checked').closest("tr").hide();
});
答案 1 :(得分:3)
您的代码存在问题,即.each()循环中的i
开始将元素索引为0,而在CSS中调用nth-child
时,第一个元素编号为1。您隐藏的行始终为1。
修复很简单-每次使用i
设置nth-child时都要加1:
$(document).on("click", "#allotBtn", function () {
$('#studentListBody tr [type="checkbox"]').each(function(i, chk) {
if (!chk.checked) {
$("#studentListBody tr:nth-child("+(i+1)+")").css("display", "none");
}
});
});
正在运行的演示:http://jsfiddle.net/jqabpru2/9/
参考:
当然,您也可以通过选择复选框的父行来简化它,就像在Viam的答案(https://stackoverflow.com/a/51762843/5947043)中那样。
再次归功于Viam,可以通过编写
$("#allotBtn").click(function(){
$('#studentListBody tr [type="checkbox"]:checked').closest("tr").hide();
});
相反。此方法的演示:http://jsfiddle.net/jqabpru2/10/
答案 2 :(得分:1)
您要做的就是在click函数中编写以下代码,而不是当前的jQuery代码:
var checkList = $("tr[role='row'] .commoncheckbox");
checkList.each(function(){
$($(this).closest("tr[role='row']").hide());
if($(this).is(":checked")){
$($(this).closest("tr[role='row']").show());
}
});
Here是jsfiddle链接。
Here是如何使用jQuery选中复选框的方法。
答案 3 :(得分:1)
这种单线应该做到这一点。不需要循环。
$(function() {
$(document).on("click", "#allotBtn", function() {
$('#studentListBody input[type=checkbox]:not(:checked)').closest('tr').hide();
});
});
此外,像这样附加click事件似乎很奇怪-无论如何,您到底将事件委托给文档本身是什么?整个过程是动态加载的吗?