更改<td>更改事件的元素值

Change <td> element value on change event

本文关键字：事件 元素 gt lt td 更改      更新时间：2023-09-26

我有一个这样的表：

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');之后，值没有改变，但如果我使用$('.sub').html('Change');，它会改变Text1和Text2。

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

试试这个：

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

由于您获取了父tr元素，children（）应该可以完成此操作。

这是jsFiddle

不确定我是否完全理解您想要做的事情，但请查看

JsFiddle演示

试试这个FIDDLE

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

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

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

相关文章：