Question

我有一张这样的表：

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');后，该值未发生变化，但如果我使用Text1，则会更改Text2和$('.sub').html('Change');。

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

Answer 1

试试这个：

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

由于你获取了父tr元素，所以children（）应该这样做。

以下是jsFiddle

Answer 2

我不确定我到底想要做什么，但请查看

JsFiddle Demo

Answer 3

试试这个.... FIDDLE

$('#example input').change(function() {
   $(this).closest('tr').find('td.sub').html('Success');
});

Answer 4

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

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

更改事件的元素值

4 个答案: