Javascript 表 td 的 onchange 事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34960759/
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
onchange event of table td?
提问by RishiPandey
I want to trigger an event onchange of data of a table cell.
我想触发一个表格单元格数据的变化事件。
// table generating code
// 表格生成代码
<table id=custorder2 > <head> <tr> <td>change it</td> </tr> </head> <tbody> <tr> <td>1</td> </tr> </tbody> </table>
// for triggering event something like this
// 用于触发这样的事件
$(document).ready(function(){
$('#custorder2 tr td').change(function() {
console.log("call");
})
})
on change of cell value this call should be printed.
在更改单元格值时，应打印此调用。
回答by RRK
You can try to use the events like DOMSubtreeModified, DOMNodeInserted, DOMNodeRemovedor a combination of them.
你可以尝试使用事件，如DOMSubtreeModified，DOMNodeInserted， DOMNodeRemoved或它们的组合。
$('#custorder2 tr td').on("DOMSubtreeModified", function(){
alert('changed');
});
$('button').on('click', function(){
$('#custorder2 tr td').text(this.id);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id=custorder2 > <head> <tr> <td>change it</td> </tr> </head> <tbody> <tr> <td>1</td> </tr> </tbody> </table>
<button id="id1">Change 1</button>
<button id="id1">Change2</button>回答by Hemant
If you are considering standard edit to cell, then i would like to suggest an alternative,
如果您正在考虑对单元格进行标准编辑，那么我想建议一个替代方案，
<script language="javascript">
function dotest(element,event)
{
//GET THE CONTENT as TEXT ONLY, you may use innerHTML as required
alert("content " + element.textContent)
}
</script>
<table cellpadding="2" cellspacing="0" border="1" width="100%">
<tr>
<td contenteditable="true" onkeyup="javascript:dotest(this,event);">
Testing
</td>
</tr>
</table>
Relies on html5 attribute and keypress (In scenarios where cells can be directly edited)
依赖于html5属性和按键（单元格可以直接编辑的场景）
Hope you find it useful
希望你觉得它有用
回答by akansh tayal
You can use inputlistener.
您可以使用input侦听器。
$(document).on('input','#table > tbody > tr > td',function(){
$(document).on('input','#table > tbody > tr > td',function(){
回答by Kunal Gadhia
By the way on-change event does not work on tr or td, but still if you want to try you can go through the code below.
顺便说一下，on-change 事件在 tr 或 td 上不起作用，但如果你想尝试，你可以通过下面的代码。
In your code i guess that target is not been recognized, so try doing:
在您的代码中，我猜该目标未被识别，因此请尝试执行以下操作：
$("#custorder > tr > td").change(function(){
});
Instead of ("#custorder tr td").change(function(){});
而不是 ("#custorder tr td").change(function(){});
HTML :
HTML :
<table id=custorder2 >
<head>
<tr>
<td>change it</td>
</tr>
</head>
<tbody>
<tr>
<td>1</td>
</tr>
</tbody>
</table>
Javascript :
Javascript :
$("#custorder > tr > td").change(function() {
console.log("inside change event");
});
