如何使用树遍历方法抓取任何表行(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>