comment saisir les données d'une ligne du tableau (HTML/JavaScript) À l'aide d'arbres Traversal Méthodes

Question

J'ai une table qui ressemble à ceci ->

<table> 
    <tr style="display: none";><td class="index">index_value</td></tr> 
    <tr><td>section header</td></tr> 
    <tr> 
     <td class="name>Steven</td> 
     <td class="height">6 ft.</td> 
     <td><button class="add">Add</button></td> 
    </tr> 
</table 

et un script js qui ressemble à ceci ->

<script> 
    $(".add").on('click', function(){ 
     var the_name = $(this).closest("td").siblings(".name").text(); 
     var the_type = $(this).closest("td").siblings(".type").text(); 
     var the_index = $(this).parent().find("td.index").text(); 
    } 

</script> 

Comme vous pouvez probablement le dire, j'essaie d'obtenir les valeurs de certains td dans cette table. Les deux premières variables fonctionnent très bien car elles sont dans la même rangée de table; Cependant, la dernière variable ne capture pas les données que je veux (à l'intérieur de la classe d'index). J'ai quelques difficultés à comprendre ces méthodes de traversée d'arbre et comment saisir des données dans une ligne de table qui n'est pas celle qui contient le bouton sur lequel on clique. Tout conseil serait apprécié, merci.

Answer 1

Il y avait quelques erreurs de syntaxe dans votre code que vous devez nettoyer, mais le problème que vous rencontrez en obtenant la valeur dans la cellule d'index est que vous n'allez pas assez loin dans l'arborescence DOM pour fonctionner la commande .find().

$(".add").on('click', function(){ 
 
    var the_name = $(this).closest("td").siblings(".name").text(); 
 
    var the_type = $(this).closest("td").siblings(".type").text(); 
 
    var the_index = $(this).closest("table").find("td.index").text(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr style="display: none";><td class="index">index_value</td></tr> 
 
    <tr><td>section header</td></tr> 
 
    <tr> 
 
     <td class="name">Steven</td> 
 
     <td class="height">6 ft.</td> 
 
     <td><button class="add">Add</button></td> 
 
    </tr> 
 
</table>