Changing style of all td elements in specific rows given tr id

user_12361100 0
Viewed 67

I got specific tr id from a for loop:

let rowId = viewPermissionDataTable.getTbodyEl().childNodes[i+1].id;

My attempts to add border to all td in specific tr:

  1. Not working.
$('#rowId td').each(function() {
    $('td').css('border-top', '1px solid #7f7f7f');
});
  1. All rows got styled instead.
$('#' + rowId).each(function() {
    $('td').css('border-top', '1px solid #7f7f7f');
});

Any idea how to fix this?

Thank you.

css jquery javascript
3 Answers

You do not have to iterate all the "td" child of the "tr" unless you have to filter the application of css.

Even that approach would work if you consider this context in the $.each. Currently, it is being applied to all "td" elements.

$('#target td').css('border-top', '1px solid #7f7f7f');
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  text-align: left;
  padding: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr id="target">
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

Considering your approach with this context

$('#target').each(function() {
  $("td", this).css('border-top', '1px solid #7f7f7f');
});

//OR using just `this` in the callback and selecting `td` elements in selector

/*$('#target td').each(function() {
  $(this).css('border-top', '1px solid #7f7f7f');
});*/
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  text-align: left;
  padding: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr id="target">
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

user_17468300 
$("#" + rowId).find("td").css("border-top", "1px solid #7f7f7f");
  • $('#' + rowId) gets the tr element.
  • .find("td") gets all td elements nested in your tr element.
  • .css("border-top", "1px solid #7f7f7f") applies the relevant styles to your td elements.
user_25094720

You have miss ' td' $('#' + rowId) will be $('#' + rowId+ ' td')

 $('#' + rowId+ ' td').each(function() {
     $('td').css('border-top', '1px solid #7f7f7f');
 });
user_27731840
Related