Question

我想触发一个关于表格单元格数据更改的事件。

//表生成代码

<table id=custorder2 > <head> <tr> <td>change it</td> </tr> </head> <tbody> <tr> <td>1</td> </tr> </tbody> </table>

//用于触发类似这样的事件

$(document).ready(function(){
    $('#custorder2 tr td').change(function() {
         console.log("call");
    })
})

在更改单元格值时，应打印此调用。

Answer 1

您可以尝试使用DOMSubtreeModified，DOMNodeInserted，DOMNodeRemoved或其组合等事件。

＆＃13;

$('#custorder2 tr td').on("DOMSubtreeModified", function(){
  alert('changed');
});
$('button').on('click', function(){
  $('#custorder2 tr td').text(this.id);
});

＆＃13;

<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>

＆＃13;

Answer 2

如果您正在考虑对单元格进行标准编辑，那么我想建议一个替代方案，

<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>

依赖于html5属性和按键（在可以直接编辑单元格的情况下）

希望你觉得它很有用

Answer 3

您可以使用input侦听器。

$（document）.on（'input'，'＃table> tbody> tr> td'，function（）{

Answer 4

顺便说一下，on-change事件在tr或td上不起作用，但如果你想尝试，你仍然可以查看下面的代码。

在您的代码中，我猜这个目标尚未被识别，所以请尝试：

$("#custorder > tr > td").change(function(){
});

而不是（＆＃34; #custorder tr td＆＃34;）。change（function（）{}）;

HTML：

<table id=custorder2 >
<head> 
   <tr> 
      <td>change it</td> 
   </tr> 
</head>          
<tbody> 
   <tr> 
      <td>1</td> 
   </tr> 
</tbody> 
</table>

Javascript：

$("#custorder > tr > td").change(function() {
     console.log("inside change event");
});

表td的onchange事件？

4 个答案: