在給定 tr id 的特定行中更改所有 td 元素的樣式

Question

我從for循環中獲得了特定的tr id：

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

我嘗試為特定tr中的所有td添加邊框：

1. 不工作。

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

2. 所有行都改為樣式。

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

知道如何解決這個問題嗎？

謝謝你。

Answer 1

除非您必須過濾css的應用程序，否則您不必迭代"tr"的所有“td”子項。

如果您在$.each中考慮this上下文，即使這種方法也可以工作。 目前，它被應用於所有"td"元素。

 $('#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>

在this情況下考慮您的方法

 $('#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)獲取tr元素。
• .find("td")獲取嵌套在tr元素中的所有td元素。
• .css("border-top", "1px solid #7f7f7f")將相關的 styles 應用於您的td元素。

Answer 3

你錯過了' td' $('#' + rowId)將是$('#' + rowId+ ' td')

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