表TD的更改事件

onchange event of table td?

本文关键字：事件 TD      更新时间：2023-09-26

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

生成代码的表

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

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

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

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

<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 属性和按键（在可以直接编辑单元格的情况下）

希望你觉得有用

您可以使用

input侦听器。

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

顺便说一下，更改事件在 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");
});
相关文章：