如何使用树遍历方法在任何 Table 行 (HTML/JavaScript) 中抓取数据

Question

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

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

您可能会说，我正在尝试获取此 table 中某些 td 的值。前两个变量工作得很好，因为它们在同一 table 行内；但是，最后一个变量没有捕获我想要的数据（在索引 class 内）。

我在理解这些树遍历方法以及如何在 table 行中获取数据时遇到了一些困难，该行不包含被单击的按钮。如有任何建议，我们将不胜感激。

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>

如何使用树遍历方法在任何 Table 行 (HTML/JavaScript) 中抓取数据

How To Grab Data In Any Table Row (HTML/JavaScript) Using Tree Traversal Methods

html

javascript

jquery

tree-traversal

tablerow