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

我从一个循环中得到了特定tr的 id :for


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


我尝试为所有td特定添加边框tr:


不工作。

$('#rowId td').each(function() {

    $('td').css('border-top', '1px solid #7f7f7f');

});

所有行都改为样式。

$('#' + rowId).each(function() {

    $('td').css('border-top', '1px solid #7f7f7f');

});

知道如何解决这个问题吗?


谢谢你。


慕运维8079593
浏览 313回答 3
3回答

慕少森

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

慕桂英546537

除非您"tr"必须过滤css.如果您this考虑$.each. 目前,它被应用于所有"td"元素。$('#target td').css('border-top', '1px solid #7f7f7f');table {&nbsp; font-family: arial, sans-serif;&nbsp; border-collapse: collapse;&nbsp; width: 100%;}td,th {&nbsp; text-align: left;&nbsp; padding: 8px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table>&nbsp; <tr>&nbsp; &nbsp; <th>Company</th>&nbsp; &nbsp; <th>Contact</th>&nbsp; &nbsp; <th>Country</th>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>Alfreds Futterkiste</td>&nbsp; &nbsp; <td>Maria Anders</td>&nbsp; &nbsp; <td>Germany</td>&nbsp; </tr>&nbsp; <tr id="target">&nbsp; &nbsp; <td>Centro comercial Moctezuma</td>&nbsp; &nbsp; <td>Francisco Chang</td>&nbsp; &nbsp; <td>Mexico</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>Ernst Handel</td>&nbsp; &nbsp; <td>Roland Mendel</td>&nbsp; &nbsp; <td>Austria</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>Island Trading</td>&nbsp; &nbsp; <td>Helen Bennett</td>&nbsp; &nbsp; <td>UK</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>Laughing Bacchus Winecellars</td>&nbsp; &nbsp; <td>Yoshi Tannamuri</td>&nbsp; &nbsp; <td>Canada</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>Magazzini Alimentari Riuniti</td>&nbsp; &nbsp; <td>Giovanni Rovelli</td>&nbsp; &nbsp; <td>Italy</td>&nbsp; </tr></table>this根据上下文考虑您的方法$('#target').each(function() {&nbsp; $("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() {&nbsp; $(this).css('border-top', '1px solid #7f7f7f');});*/table {&nbsp; font-family: arial, sans-serif;&nbsp; border-collapse: collapse;&nbsp; width: 100%;}td,th {&nbsp; text-align: left;&nbsp; padding: 8px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table>&nbsp; <tr>&nbsp; &nbsp; <th>Company</th>&nbsp; &nbsp; <th>Contact</th>&nbsp; &nbsp; <th>Country</th>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>Alfreds Futterkiste</td>&nbsp; &nbsp; <td>Maria Anders</td>&nbsp; &nbsp; <td>Germany</td>&nbsp; </tr>&nbsp; <tr id="target">&nbsp; &nbsp; <td>Centro comercial Moctezuma</td>&nbsp; &nbsp; <td>Francisco Chang</td>&nbsp; &nbsp; <td>Mexico</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>Ernst Handel</td>&nbsp; &nbsp; <td>Roland Mendel</td>&nbsp; &nbsp; <td>Austria</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>Island Trading</td>&nbsp; &nbsp; <td>Helen Bennett</td>&nbsp; &nbsp; <td>UK</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>Laughing Bacchus Winecellars</td>&nbsp; &nbsp; <td>Yoshi Tannamuri</td>&nbsp; &nbsp; <td>Canada</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>Magazzini Alimentari Riuniti</td>&nbsp; &nbsp; <td>Giovanni Rovelli</td>&nbsp; &nbsp; <td>Italy</td>&nbsp; </tr></table>

慕的地6264312

你有想念' td' $('#' + rowId)将是$('#' + rowId+ ' td')&nbsp;$('#' + rowId+ ' td').each(function() {&nbsp; &nbsp; &nbsp;$('td').css('border-top', '1px solid #7f7f7f');&nbsp;});
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript