logo标签列表

表格单元格的onchange事件？

javascriptjqueryhtml
7

我希望在表格单元格数据变化时触发一个事件。

// 生成表格的代码

<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");
    })
})

当单元格的值发生变化时，应该打印此调用。

td不是一个可以更改值的输入元素？你是不是想通过编程来实现更改？ - gurvinder372
是的，你理解正确。 - RishiPandey
onChange 不适用于 td 或 tr。 - Raviteja
通过document.getElementById("td_id").textContent获取td的值。 - user0946076422
1
可能是重复的问题：Jquery事件：检测div的html/text内容是否发生变化 - rrk
显示剩余5条评论
4个回答
4
如果您考虑对单元格进行标准编辑，那么我想建议一个替代方案。
<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属性和keypress（在单元格可以直接编辑的情况下）

希望你觉得它有用

4

您可以尝试使用像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>

这对我没有用，但是使用$("#custorder2 ").bind("DOMSubtreeModified", function() {})的类似答案有效。 - sc28
2
你可以使用监听器。

$(document).on('input','#table > tbody > tr > td',function(){

最初的回答。
-1

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

在您的代码中，我猜测目标没有被识别，所以尝试执行以下操作：

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

不要使用 ("#custorder tr td").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");
});
如果表是动态创建的，它能正常工作吗？ - RishiPandey
即使您的表是动态创建的，我也认为它不会起作用。 - Kunal Gadhia
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接