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

Question

我从for循环中得到了特定的trid：

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

$("#" + rowId).find("td").css("border-top", "1px solid #7f7f7f");

---

• $('#' + rowId)得到tr元素
• .find("td")获取嵌套在tr元素中的所有td元素
• .css("border-top", "1px solid #7f7f7f")将相关样式应用于td元素

Answer 2

除非必须筛选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 3

您已错过' td'$('#' + rowId)将是$('#' + rowId+ ' td')

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