3

我有一张这样的桌子：

Column 1 | Column 2
-------------------
Textbox1 | Text1
Textbox2 | Text2

我想更改Textbox1值，当光标移出时，它将运行change事件以将Text1值替换为Success.

<html>
    <head>
        <title>Demo - Change Value</title>
        <script type="text/javascript" language="javascript" src="js/jquery.js"></script>
        <script>
            $(document).ready(function() {
                $('#example table tbody tr td input').change(function() {
                    var rowEdit = $($(this).parents('tr').html());

                    rowEdit.closest('.sub').html('Success');
<!--                    $('.sub').html('Change');-->
                })
            })
        </script>
    </head>

    <body>
        <div id="example">
            <table>
                <thead>
                    <th>Column 1</th>
                    <th>Column 2</th>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" /></td>
                        <td class="sub">123</td>
                    </tr>
                    <tr>
                        <td><input type="text" /></td>
                        <td class="sub">456</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

问题是，在我调用之后值没有改变，但rowEdit.closest('.sub').html('success');如果我使用.Text1Text2$('.sub').html('Change');

input我的目标是在更改具有同一行的第 1 列的值时更改第 2 列内的文本。我怎样才能做到这一点？

4

4 回答 4

4

尝试这个：

$(document).ready(function() {
  $('#example table tbody tr td input').change(function() {
    var rowEdit = $(this).parents('tr');
    rowEdit.children('.sub').html('Success');
  })
})

由于您获取了父 tr 元素，因此 children() 应该可以解决问题。

这是jsFiddle

于 2012-08-29T04:29:51.090 回答
1

不确定我完全理解你想要做什么，但看看这个

JsFiddle 演示

于 2012-08-29T04:39:26.647 回答
1

试试这个....小提琴

$('#example input').change(function() {
   $(this).closest('tr').find('td.sub').html('Success');
});
于 2012-08-29T04:40:54.820 回答
0

添加了对 JS Fiddle 的更改：http: //jsfiddle.net/abhisheks/ZPLdu/2

请告诉我，如果有任何其他变化。

于 2012-08-29T04:40:11.573 回答