Dev Faq
0
votes

Comment définir une ID spécifique sur les cellules de la table

J'ai une table et je veux définir un identifiant spécifique sur chaque td code> S dans ma table. Pour plus d'explication:

J'ai une table comme celle-ci: p> xxx pré>

et je veux faire ce tableau comme celui-ci via JQuery: P> 

<table class="myTable">
  <tr class="tr">
    <td class="td" id="td1"></td>
    <td class="td" id="td2"></td>
    <td class="td" id="td3"></td>
    <td class="td" id="td4"></td>
  </tr>
  <tr class="tr">
    <td class="td" id="td5"></td>
    <td class="td" id="td6"></td>
    <td class="td" id="td7"></td>
    <td class="td" id="td8"></td>
  </tr>
</table>

4 commentaires

est-ce comme séquentielle td1, td2, td3 .. ??

@Nidhinjoseph Oui c'est.

S'il vous plaît vérifier, avez mis une réponse dans

Qu'avez-vous essayé qui ne fonctionne pas? On s'attend à ce que vous montrez votre code tente de résoudre votre propre problème lors de la pose des questions.

3 Réponses :

1
votes

Peut-être quelque chose comme ça? Vous pouvez utiliser chacun () code> qui vous donnera l'élément et l'index.

p> 

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<table class="myTable">
  <tr class="tr">
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
  </tr>
  <tr class="tr">
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
  </tr>
</table>

0 commentaires
0
votes

Vous êtes peut-être mieux à utiliser Attributs de données dans ce cas.

Voici la méthode JQuery: p> xxx pré>

et voici la méthode de la vanille de la vanille tout aussi succincte: p> xxx pré >

Si vous avez plusieurs tables en boucle sur eux comme vous le ferez avec les cellules, puis bouclez sur les cellules de cette table. Voici une méthode Vanilla JS qui crée un identifiant de table et utilise avec l'ID de la cellule pour créer un attribut de données comme: TD2.1 code> pour la cellule 1 dans le tableau 2. Si vous exécutez l'extrait et inspectez la Éléments de tableaux Vous pouvez voir cet effet. p>

p>

0 commentaires
0
votes

Vous devez faire boucle chaque instance de .mytable code>, puis trouvez tout td code> et en boucle. J'ai supprimé les fonctionnalités ES6.

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="myTable">
  <tr class="tr">
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
  </tr>
  <tr class="tr">
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
  </tr>
</table>

<table class="myTable">
  <tr class="tr">
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
  </tr>
  <tr class="tr">
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
    <td class="td"></td>
  </tr>
</table>

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO