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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 17:06:10  来源:igfitidea点击:

onchange event of table td?

javascriptjqueryhtml

提问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.

你可以尝试使用事件,如DOMSubtreeModifiedDOMNodeInsertedDOMNodeRemoved或它们的组合。

$('#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");
});