如果在HTML表格内未选中复选框,如何隐藏行?

时间:2018-08-09 08:54:21

标签: javascript jquery html css

我已经在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行以上,则上面的代码会随意隐藏行。

请帮助!!!

4 个答案:

答案 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事件似乎很奇怪-无论如何,您到底将事件委托给文档本身是什么?整个过程是动态加载的吗?