javascript 在更改事件上更改 <td> 元素值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12170747/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change <td> element value on change event
提问by Crazenezz
I have a table like this:
我有一张这样的表：
Column 1 | Column 2
-------------------
Textbox1 | Text1
Textbox2 | Text2
I want to change the Textbox1value and when the cursor move out it will run the changeevents to replace the Text1value to Success.
我想更改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>
The problem is, the value didn't change after I call the rowEdit.closest('.sub').html('success');but it will change the Text1and Text2if I use $('.sub').html('Change');.
问题是，在我调用 之后该值没有改变rowEdit.closest('.sub').html('success');但它会改变Text1并且Text2如果我使用$('.sub').html('Change');.
My goal is to change the text inside the Column 2 when I change the value of inputof the column 1 with same row. How can I achieve that?
我的目标是在更改input同一行的第 1 列的值时更改第 2 列内的文本。我怎样才能做到这一点？
回答by Senthil Kumar
Try this:
试试这个：
$(document).ready(function() {
$('#example table tbody tr td input').change(function() {
var rowEdit = $(this).parents('tr');
rowEdit.children('.sub').html('Success');
})
})
Since you fetched the parent tr element, children() should do the trick.
由于您获取了父 tr 元素，因此 children() 应该可以解决问题。
Here is the jsFiddle
这是jsFiddle
回答by Vins
回答by Hazem Salama
Not sure I understand exactly what you are trying to do, but check this out
不确定我完全理解你想要做什么，但看看这个
回答by insomiac
Added changes to JS Fiddle : http://jsfiddle.net/abhisheks/ZPLdu/2
添加了对 JS Fiddle 的更改：http: //jsfiddle.net/abhisheks/ZPLdu/2
Please let me know, if there is any other change.
请让我知道，如果有任何其他变化。
