How to append a class to table row by using parent function?

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>

`tr` elements do not support borders. You could instead put the border on the `td` based on the class on the `tr`, eg. `tr.red-border td { border: 1px solid #C00; }` — Rory McCrossan, Dec 04 '19 at 09:50
thanks for suggesting me additional information but my main problem is that it does not append class "red-border" to the tr element — Nida Amin, Dec 04 '19 at 09:53
`.closest() is not working` why not? how did you use it? try `$(".jsgrid-table .warning").closest("tr").addClass("red-border");` — Thomas, Dec 04 '19 at 09:54
`it does not append class "red-border" to the tr element` It does - as you can see from the snippet I edited in to your question. If it's not working for you check the console for errors and ensure you've included jQuery in the page, and are running your jQuery code after the DOM has loaded. — Rory McCrossan, Dec 04 '19 at 10:01

score 1 · Answer 1 · answered Dec 04 '19 at 11:34

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.

score 0 · Answer 2 · answered Dec 04 '19 at 09:58

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>

score 0 · Answer 3 · answered Dec 04 '19 at 10:00

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

Kedar · Answer 4 · 2019-12-04T11:07:59.430

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

score 0 · Answer 5 · answered Dec 04 '19 at 10:53

0

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

answered Dec 04 '19 at 10:53

Arpit Jain

175
5

How to append a class to table row by using parent function?

5 Answers5