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
, DOMNodeRemoved
or 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 input
listener.
您可以使用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");
});