使用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>