J'ai obtenu l'identifiant tr spécifique d'une boucle for:

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

Mes tentatives pour ajouter une bordure à tous les td dans des tr spécifiques:

  1. Ca ne fonctionne pas.
$('#rowId td').each(function() {
    $('td').css('border-top', '1px solid #7f7f7f');
});
  1. Toutes les lignes ont été stylisées à la place.
$('#' + rowId).each(function() {
    $('td').css('border-top', '1px solid #7f7f7f');
});

Une idée de comment résoudre ce problème?

Je vous remercie.

2
Yeo 7 avril 2020 à 06:46

4 réponses

Vous n'êtes pas obligé d'itérer tous les enfants "td" de "tr", sauf si vous devez filtrer l'application de css.

Même cette approche fonctionnerait si vous considérez le contexte this dans le $.each. Actuellement, il est appliqué à tous les éléments "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>

En tenant compte de votre approche dans le contexte 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>
0
Rayon 7 avril 2020 à 04:07

Vous pouvez résoudre ce problème en ciblant uniquement le td à l'intérieur de la ligne actuelle en utilisant le contexte this comme:

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

DEMO:

$('#myRowId td').each(function() {
  $(this).css('border-top', '1px solid #7f7f7f');
});
#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
#customers td, #customers th {
  padding: 4px;
}
#customers th {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="customers">
  <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='myRowId'>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Ou, en utilisant ceci

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

DEMO:

$('#myRowId').each(function() {
  $('td', this).css('border-top', '1px solid #7f7f7f');
});
#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
#customers td,#customers th {
  padding: 4px;
}
#customers th {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="customers">
  <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='myRowId'>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>
0
palaѕн 7 avril 2020 à 04:09
$("#" + rowId).find("td").css("border-top", "1px solid #7f7f7f");

  • $('#' + rowId) obtient l'élément tr.
  • .find("td") obtient tous les td éléments imbriqués dans votre élément tr.
  • .css("border-top", "1px solid #7f7f7f") applique les styles pertinents à vos éléments td.
0
Pbk1303 7 avril 2020 à 04:07

Essaye ça

 $('#' + rowId+ ' td').each(function() {
     $('td').css('border-top', '1px solid #7f7f7f');
 });
0
Mohammad Ali Rony 7 avril 2020 à 03:55