Изменение стиля всех элементов td в указанных c строках с учетом идентификатора tr

Question

Я получил спецификацию c tr идентификатор от for l oop:

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

Мои попытки добавить границу ко всем td в указанных c tr:

1. Не работает.

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

Вместо этого все стили получили стиль.

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

Есть идеи, как это исправить?

Спасибо.

Answer 1

Вам не нужно перебирать все потомки "td" "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 context

$('#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") получает все элементы td, вложенные в ваш элемент tr.
• .css("border-top", "1px solid #7f7f7f") применяет соответствующие стили к вашим td элементам.

Answer 3

У вас мисс ' td' $('#' + rowId) будет $('#' + rowId+ ' td')

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