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

Question

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');
});

2. All rows got styled instead.

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

Any idea how to fix this?

Thank you.

Answer 1

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>

Answer 2

$("#" + 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.

Answer 3

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

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