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