如何使用父函数将类附加到表行？

Question

I want to append the class red-border to a tr element which contains a span with class warning . My code is not working. Please help.

 $(document).ready(function() { $("body").css("width", "2000px"); $(".jsgrid-table").find(".warning").parents().addClass("red-border"); });

 .red-border { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="jsgrid-table"> <tbody> <tr class="jsgrid-row"> <td class="jsgrid-cell jsgrid-align-left" style="width: 100%;">2018</td> <td class="jsgrid-cell jsgrid-align-left" style="width: 100%;"><span class="warning"></span></td> </tr> </tbody> </table>

Answer 1

adding border in the tr element is not allowed. Also, use .closest() selector to find the parent that matches the conditions

 $(document).ready(function() { $("body").css("width", "2000px"); $(".jsgrid-table .warning").closest("tr").addClass("red-border"); });

 .red-border{ color:red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="jsgrid-table"> <tbody> <tr class="jsgrid-row"> <td class="jsgrid-cell jsgrid-align-left" style="width: 100%;">2018</td> <td class="jsgrid-cell jsgrid-align-left" style="width: 100%;"> <span class="warning"></span> </td> </tr> <tr class="jsgrid-row"> <td class="jsgrid-cell jsgrid-align-left" style="width: 100%;">2018</td> </td> </tr> </tbody> </table>

As in this snippet first tr has class warning and so class red-border and in the next tr children element of this tr doesn't have warning class and no red-border is present in this tr element.

Answer 2

As said by @Thomas, .closest() is working fine. Check below the fiddle. As the borders are not supported for tr , I just have updated the color.

 $(document).ready(function () { $("body").css("width", "2000px"); $(".jsgrid-table .warning").closest("tr").addClass("red-border"); });

 .red-border{ color:red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="jsgrid-table"> <tbody> <tr class="jsgrid-row "> <td class="jsgrid-cell jsgrid-align-left" style="width: 100%;">2018</td> ... <td class="jsgrid-cell jsgrid-align-left" style="width: 100%;"><span class="warning"></span></td> </tr> </tbody> </table>

Answer 3

<tr> does not have a border itself, but you can make it work:

 $("body").css("width", "2000px"); $(".jsgrid-table .warning").closest("tr").addClass("red-border");

 tr.red-border { background: yellow; } tr.red-border > td { border-top: 2px dotted red; border-bottom: 2px dotted red; } tr.red-border > td:first-child { border-left: 2px dotted red; } tr.red-border > td:last-child { border-right: 2px dotted red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="jsgrid-table"> <tbody> <tr class="jsgrid-row"> <td class="jsgrid-cell jsgrid-align-left" style="width: 100%;">2018</td> <!--...--> <td class="jsgrid-cell jsgrid-align-left" style="width: 100%;"><span class="warning"></span></td> </tr> </tbody> </table>

Answer 4

You code is working fine except it adds the red-border on all parent elements. So, to add the class only on the tr tag, then pass the tr in the .parents() function.

$(".jsgrid-table").find(".warning").parents() --- this selects all the parent elements of the element having class warning

$(".jsgrid-table").find(".warning").parents('tr') --- this selects only tr element out of the all parent elements having class warning

 $(document).ready(function() { $("body").css("width", "2000px"); $(".jsgrid-table").find(".warning").parents('tr').addClass("red-border"); });

 .red-border td{ color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="jsgrid-table"> <tbody> <tr class="jsgrid-row"> <td class="jsgrid-cell jsgrid-align-left" style="width: 100%;">2018</td> <td class="jsgrid-cell jsgrid-align-left" style="width: 100%;"><span class="warning"></span></td> </tr> </tbody> </table>

You can also check the below link for more details on parent, parents & colsest Difference between jQuery parent(), parents() and closest() functions

Answer 5

$(document).ready(function() {
  $("body").css("width", "2000px");
  $(".jsgrid-table").find(".warning").parents('tr').addClass("red-border");
});