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

Question

我从一个循环中得到了特定tr的 id ：forlet 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');});知道如何解决这个问题吗？谢谢你。

Answer 1

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

---

• $('#' + rowId)获取tr元素。

• .find("td")获取td嵌套在您的元素中的所有元素tr。

• .css("border-top", "1px solid #7f7f7f")将相关样式应用于您的td元素。

Answer 2

除非您"tr"必须过滤css.

如果您this考虑$.each. 目前，它被应用于所有"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');

 });