使用Jquery选择父表的行后选择子表的行

Question

我是jquery的新手，并一步一步地学习这些东西。

我有一些主表和这些主表内的嵌套表。 父表和子表的每一行都有一个复选框。 现在，在选中父表的复选框时，应选中子表/嵌套表的每一行的复选框。

我已使用以下代码注册该事件：

$(function () {
    $("input[type='checkbox']").change(function () {
    $(this).siblings('tr')
        .find("input[type='checkbox']")
        .prop('checked', this.checked);


    });
});

但是上面的代码无法正常工作。 我无法正确遍历子表。

为了说明起见，我创建了一个带有一个父表和一个子表的小提琴。

 $(function() { $("input[type='checkbox']").change(function() { $(this).siblings('tr') .find("input[type='checkbox']") .prop('checked', this.checked); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div id="divSAcheckBox" style="display: inline; left: 37px; position: relative;"><input id="SAcheckBox" name="SAcheckBox" type="checkbox" /> Select All</div> <table id="parentTable" class="display dataTable no-footer" style="position: relative; top: 0px; width: 911px; table-layout: fixed;" role="grid"> <thead> <tr style="height: 0px;" role="row"> <th class="sorting_disabled" style="width: 0px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" colspan="1" rowspan="1">&nbsp;</th> <th id="chkbox" class="sorting_disabled" style="width: 51px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" colspan="1" rowspan="1">Select <div class="dataTables_sizing" style="height: 0; overflow: hidden;">Select</div> </th> <th id="media" class="sorting" style="border-left: 1px dashed #111111; text-align: left; width: 51px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" colspan="1" rowspan="1">Media <div class="dataTables_sizing" style="height: 0; overflow: hidden;">Media</div> </th> </tr> </thead> <tbody> <tr class="odd shown" role="row" align="left"> <td class="sorting_1"><input style="cursor: pointer;" type="checkbox" align="center" /></td> <td class="details-control" style="width: 51px;">&nbsp;</td> <td style="width: 51px;">Phone</td> <td style="width: 90px;" colspan="9"> <table id="issuetable_12_13_2018_13_23_34" class="stripe nowrap" style="position: relative; margin: 5px 0 0 30px; cellspacing=0; border-collapse: collapse; align-text: left; top: 0px; width: 95%;"> <thead> <tr> <th>&nbsp;</th> </tr> <tr> <th>&nbsp;</th> <th>&nbsp;</th> </tr> <tr> <th>&nbsp;</th> <th>&nbsp;</th> </tr> <tr> <th>&nbsp;</th> <th>&nbsp;</th> </tr> <tr> <th>&nbsp;</th> </tr> <tr> <th style="border: 1px solid #333333; text-align: left; width: 333px;" nowrap="nowrap" bgcolor="#FAF6F2">Select</th> <th style="border: 1px solid #333333; text-align: left; width: 407px;" nowrap="nowrap" bgcolor="#FAF6F2">Priority</th> </tr> </thead> <tbody> <tr align="left"> <td style="width: 333px;" nowrap="nowrap"><input style="cursor: pointer;" type="checkbox" align="center" />&nbsp;</td> <td style="width: 407px;" nowrap="nowrap">999</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> 

JSfddle

任何帮助深表感谢。

Answer 1

当前元素是复选框，因此它不能具有TR因为同级使用.closest()遍历到父TR元素，然后执行所需的DOM遍历方法，即.siblings() .find()来定位所需的元素

$(this).closest('tr').find(...)
$(this).closest('tr').siblings('tr').find(...)

 $(function() { $("input[type='checkbox']").change(function() { $(this).closest('tr') .find("input[type='checkbox']") .prop('checked', this.checked); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div id="divSAcheckBox" style="display: inline; left: 37px; position: relative;"><input id="SAcheckBox" name="SAcheckBox" type="checkbox" /> Select All</div> <table id="parentTable" class="display dataTable no-footer" style="position: relative; top: 0px; width: 911px; table-layout: fixed;" role="grid"> <thead> <tr style="height: 0px;" role="row"> <th class="sorting_disabled" style="width: 0px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" colspan="1" rowspan="1">&nbsp;</th> <th id="chkbox" class="sorting_disabled" style="width: 51px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" colspan="1" rowspan="1">Select <div class="dataTables_sizing" style="height: 0; overflow: hidden;">Select</div> </th> <th id="media" class="sorting" style="border-left: 1px dashed #111111; text-align: left; width: 51px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" colspan="1" rowspan="1">Media <div class="dataTables_sizing" style="height: 0; overflow: hidden;">Media</div> </th> </tr> </thead> <tbody> <tr class="odd shown" role="row" align="left"> <td class="sorting_1"><input style="cursor: pointer;" type="checkbox" align="center" /></td> <td class="details-control" style="width: 51px;">&nbsp;</td> <td style="width: 51px;">Phone</td> <td style="width: 90px;" colspan="9"> <table id="issuetable_12_13_2018_13_23_34" class="stripe nowrap" style="position: relative; margin: 5px 0 0 30px; cellspacing=0; border-collapse: collapse; align-text: left; top: 0px; width: 95%;"> <thead> <tr> <th>&nbsp;</th> </tr> <tr> <th>&nbsp;</th> <th>&nbsp;</th> </tr> <tr> <th>&nbsp;</th> <th>&nbsp;</th> </tr> <tr> <th>&nbsp;</th> <th>&nbsp;</th> </tr> <tr> <th>&nbsp;</th> </tr> <tr> <th style="border: 1px solid #333333; text-align: left; width: 333px;" nowrap="nowrap" bgcolor="#FAF6F2">Select</th> <th style="border: 1px solid #333333; text-align: left; width: 407px;" nowrap="nowrap" bgcolor="#FAF6F2">Priority</th> </tr> </thead> <tbody> <tr align="left"> <td style="width: 333px;" nowrap="nowrap"><input style="cursor: pointer;" type="checkbox" align="center" />&nbsp;</td> <td style="width: 407px;" nowrap="nowrap">999</td> </tr> </tbody> </table> </td> </tr> </tbody> </table>