HTML表格的onChange [英] HTML table onChange

问题描述

我有一个问题：我有表时时更新时间由AJAX脚本。此更新通过Chrome插件，我不想改变调用。所以，我想补充一些jQuery的触发器上表单元格的变化会打电话给我自己的功能。

I have a problem: I have table that is updated from time to time by AJAX script. This update is called from Chrome plugin which I don't want to change. So I'd like to add some kind of jQuery trigger that on change of table cells will call my own function.

这可能吗？我试过的onChange事件，但它不工作（这是输入，如果我是对的）

Is it possible? I tried event onChange but it doesn't work (it's for input if I'm right)

在此先感谢！

推荐答案

的onchange 是专为输入使用像＆LT;选择＆GT; - 所以不会工作在这方面。有一些特定的DOM相关的事件，你可以使用的（如 DOMSubtreeModified ）的，但这些都不是跨浏览器并有不同的实现的（即使是现在，他们可能会去precated）的：

onchange is designed for use with inputs like <select> - so wont work in this context. There are specific dom related events you can use (like DOMSubtreeModified), but these aren't cross-browser and have varying implementations (they may even now be deprecated):

http://en.wikipedia.org/wiki/DOM_events

MutationEvents 上述似乎已经被换成 MutationObservers ，我没有使用过但自己...但是听起来像它会做你的需要：

MutationEvents as mentioned above have seemingly been replaced by MutationObservers which I have not used yet myself... but sounds like it would do what you need:

HTTP：//dvcs.w3。组织/ HG / domcore /原始文件/提示/ Overview.html＃突变观察家

以外，你可以回退到的setInterval 处理程序将侦听目标元素中的HTML的任何变化......当它改变时，你火了功能。

Other than that you can fallback to a setInterval handler that will listen for any change in the HTML within your target element... when it changes you fire a function.

function watch( targetElement, triggerFunction ){
  /// store the original html to compare with later
  var html = targetElement.innerHTML;
  /// start our constant checking function
  setInterval(function(){
    /// compare the previous html with the current
    if ( html != targetElement.innerHTML ) {
      /// trigger our function when a change occurs
      triggerFunction();
      /// update html so that this doesn't keep triggering
      html = targetElement.innerHTML;
    }
  },500);
}

function whenChangeHappens(){
  alert('this will trigger when the html changes in my_target');
}

watch( document.getElementById('my_target'), whenChangeHappens );

jQuery插件

如果你想上面jQueryify的到的东西，你可以应用到任何元素，将便于修改：

jQuery Plugin

If you want to jQueryify the above into something you can apply to any element it would easy to modify:

/// set up the very simple jQuery plugin
(function($){
  $.fn.domChange = function( whenChanged ){
     /// we want to store our setInterval statically so that we
     /// only use one for all the listeners we might create in a page
     var _static = $.fn.domChange;
     _static.calls = [];
     _static.iid = setInterval( function(){
       var i = _static.calls.length;
       while ( i-- ) {
         if ( _static.calls[i] ) {
           _static.calls[i]();
         }
       }
     }, 500 );
     /// step each element in the jQuery collection and apply a
     /// logic block that checks for the change in html
     this.each (function(){
       var target = $(this), html = target.html();
       /// by adding the function to a list we can easily switch
       /// in extra checks to the main setInterval function
       _static.calls.push (function(){
         if ( html != target.html() ) {
           html = target.html();
           whenChanged();
         }
       });
     });
  }
})(typeof jQuery != undefined && jQuery);

/// example code to test this
(function($){
  $(function(){
    $('div').domChange( function(){
      alert('I was changed!');
    } );
  });
})(typeof jQuery != undefined && jQuery);

显然，上面是一个很简单的版本，它应该被扩展到处理添加和删除听众。

Obviously the above is a very simple version, it should be extended to handle adding and removing of listeners.

这篇关于HTML表格的onChange的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！