向上导航 DOM，如何返回？答案

【问题标题】：Navigating up the DOM, how to get back down?向上导航 DOM，如何返回？
【发布时间】：2013-11-15 08:17:34
【问题描述】：

我有一张这样的桌子。

<table id="order-table">
    <tr class="row-header">
        <td style="width: 80px;">Line #</td>
        <td style="width: 100px;">ID #</td>
        <td style="width: 50px;">Qty</td>
        <td style="width: 100px;">Desc</td>
        <td style="width: 100px;">ABC8</td>
        <td style="width: 100px;">UPC</td>
        <td style="width: 100px;">NDC</td>
    </tr>
    <tr class="row">
        <td style="width: 80px;"><input class="row-target" readonly tabindex="-1" style="width: 80px; background: lightgray" type="text" value="10"></td>
        <td style="width: 100px;"><input class="id-target" style="width: 100px;" type="text" /></td>
        <td style="width: 50px;"><input class="qty-target" style="width: 50px;" type="text" /></td>
        <td style="width: 100px;"><input readonly tabindex="-1" style="width: 100px; background: lightgray" type="text" /></td>
        <td style="width: 100px;"><input readonly tabindex="-1" style="width: 100px; background: lightgray" type="text" /></td>
        <td style="width: 100px;"><input readonly tabindex="-1" style="width: 100px; background: lightgray" type="text" /></td>
        <td style="width: 100px;"><input readonly tabindex="-1" style="width: 100px; background: lightgray" type="text" /></td>
    </tr>
</table>

还有一些像这样的 jQuery：

function checkIdTarget(rownum) { 
    if ($(this).val().length === 8) {
        var rownum = $(this).parent("td").children(".row-target").val();
        alert (rownum);
        var newrow = '<tr class="row"><td style="width: 80px;"><input class="row-target" readonly tabindex="-1" style="width: 80px; background: lightgray" type="text" value="' + rownum + '"></td><td style="width: 100px;"><input class="id-target" style="width: 100px;" type="text" /></td><td style="width: 50px;"><input class="qty-target" style="width: 50px;" type="text" /></td><td style="width: 100px;"><input readonly tabindex="-1" style="width: 100px; background: lightgray" type="text" /></td><td style="width: 100px;"><input readonly tabindex="-1" style="width: 100px; background: lightgray" type="text" /></td><td style="width: 100px;"><input readonly tabindex="-1" style="width: 100px; background: lightgray" type="text" /></td><td style="width: 100px;"><input readonly tabindex="-1" style="width: 100px; background: lightgray" type="text" /></td></tr>';
        $(newrow).insertAfter($(this).parents("tr"));
        $("#button-submit-order").button("enable");
    }
    if ($(this).val().length > 8) {
        var x = $(this).val();
        $(this).val(x.slice(0, -1));
        $(this).effect("shake");
    }
    if (isNaN($(this).val())) {
        var x = $(this).val();
        $(this).val(x.slice(0, -1));
        $(this).effect("shake");
    }
}

我正在尝试从类row-target 的输入框中获取相对于我调用this 的当前ID 框的值。该值返回未定义。我做错了什么？

【问题讨论】：

checkIdTarget 绑定到什么？
如果this 是id-target 元素那么$(this).parent().prev().find('input')
您当前正在选择与原始 this 相同的 TD 的子代 - 我猜是输入字段 - 所在的位置，这是行不通的...您需要升到 1 级一个 TR 代替 - parent('td').parent('tr')
@ZathrusWriter 不是 closest("tr")?
好点 Archer，这可能是一个更好的主意 :)

标签： jquery html dom html-table

【解决方案1】：

在您的 JQuery 的第 3 行中，您应该编写以下代码：

var rownum = $(this).closest("td").find(".row-target").val();

【讨论】：