如何抓住数据在任何表行（HTML/JavaScript）的使用树遍历方法

Question

我有一个表，看起来像这样 - >

<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 

和JS脚本，看起来像这样 - >

<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> 

正如你可以告诉，我试图获得在这个表内的某些td的值。前两个变量工作得很好，因为它们在同一个表格行内;但是，最后一个变量没有捕获我想要的数据（在索引类中）。

我在理解这些遍历树的方法时遇到了一些麻烦，以及如何在包含单击按钮的表行中获取数据。任何意见将不胜感激，谢谢。

Answer 1

您的代码中有几处需要清理的语法错误，但是您在索引单元格中获取值时遇到的问题是您在DOM树上运行得不够远，无法运行.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>