[英]Changing style of all td elements in specific rows given tr id
I got specific tr
id from a for
loop:我从for
循环中获得了特定的tr
id:
let rowId = viewPermissionDataTable.getTbodyEl().childNodes[i+1].id;
My attempts to add border to all td
in specific tr
:我尝试为特定tr
中的所有td
添加边框:
$('#rowId td').each(function() {
$('td').css('border-top', '1px solid #7f7f7f');
});
$('#' + rowId).each(function() {
$('td').css('border-top', '1px solid #7f7f7f');
});
Any idea how to fix this?知道如何解决这个问题吗?
Thank you.谢谢你。
You do not have to iterate all the "td" child of the "tr"
unless you have to filter the application of css
.除非您必须过滤css
的应用程序,否则您不必迭代"tr"
的所有“td”子项。
Even that approach would work if you consider this
context in the $.each
.如果您在$.each
中考虑this
上下文,即使这种方法也可以工作。 Currently, it is being applied to all "td"
elements.目前,它被应用于所有"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>
Considering your approach with this
context在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>
$("#" + rowId).find("td").css("border-top", "1px solid #7f7f7f");
$('#' + rowId)
gets the tr
element. $('#' + rowId)
获取tr
元素。.find("td")
gets all td
elements nested in your tr
element. .find("td")
获取嵌套在tr
元素中的所有td
元素。.css("border-top", "1px solid #7f7f7f")
applies the relevant styles to your td
elements. .css("border-top", "1px solid #7f7f7f")
将相关的 styles 应用于您的td
元素。You have miss ' td'
$('#' + rowId)
will be $('#' + rowId+ ' td')
你错过了' td'
$('#' + rowId)
将是$('#' + rowId+ ' td')
$('#' + rowId+ ' td').each(function() {
$('td').css('border-top', '1px solid #7f7f7f');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.