Question

您好我有以下表格数据：

<tr>
  <td><input type="text" data-usage="payment" /></td>
  <td><input type="text" data-usage="payment" /></td>
  <td data-usage="amount"></td>
</tr>

然后我试图这样做，当用户离开带有data-usage =“payment”的文本框时，data-usage =“amount”的td将其文本设置为“info”。我写道：

<script type="text/javascript">
    $(document).ready(function () {

        $("input[data-usage='payment']").blur(function () {

            $(this).closest("td[data-usage='amount']").text("info");
        });

    });
</script>

我不明白为什么但这甚至不起作用。该事件被触发，它似乎找到了td，但文本甚至没有设置。

谁能告诉我为什么？有没有更好的方法来解决这个问题？

Answer 1

closest()只搜索元素的父元素，您正在寻找最接近的TR，然后是具有数据属性的TD：

$("input[data-usage='payment']").blur(function () {
     $(this).closest("tr").find("td[data-usage='amount']").text("info");
});

Answer 2

[data-usage='amount'] td不是目标输入元素的父级，它实际上是包含目标输入的td的兄弟

$(document).ready(function () {
    $("input[data-usage='payment']").blur(function () {
        $(this).closest("td").siblings("[data-usage='amount']").text("info");
    });
});

演示：Fiddle

Answer 3

这是完整的例子：

    $("input[data-usage='payment']").blur(function () {
        $(this).closest("tr").find("td[data-usage='amount']").text("info");
    });

这里是示例：example

jquery无法在表中设置兄弟td文本

3 个答案: