监听表行计数变化答案

【问题标题】：listening for table rows count change监听表行计数变化
【发布时间】：2012-03-19 19:01:18
【问题描述】：

我使用的是 html 表。我的要求是，我想听听行数的变化。有没有办法做到这一点？

注意：我这里没有增删行功能实现。

此外，我已经尝试过了，

$("#myTable>tbody>tr").watch("length", function () {
    alert("row count changed..")
});

但是，上面的代码对我不起作用。你们有谁知道怎么做吗？

提前致谢，

-拉贾。

【问题讨论】：

看来 OP 已尝试使用以下 jQuery 插件：archive.plugins.jquery.com/project/watch（watch("length") 位）
感谢您的回复。是的，一点没错。但是，上面的代码不起作用。你能找出我的错误吗？
确实没有足够的代码出错。这个特殊的插件是在 2009 年添加的，此后似乎已被放弃。很可能，它不适用于现代版本的 jQuery。
@RajaGopal “你能找出我的错误吗？” .watch 不是 jquery 方法。你是从哪里弄来的？

标签： jquery html jquery-ui

【解决方案1】：

您可以监控 DOM 事件 DOMSubtreeModified（请注意，该事件已被弃用，因此如果有人建议要监控更好的事件，请更改此）它会在更改为DOM 树。我们可以使用 jQuery 的 bind 函数在表上触发事件时触发函数。该函数可以检查行数是否发生了变化。

var numberOfRows = $("#myTable>tbody>tr").length;
$("#myTable").bind("DOMSubtreeModified", function() {
    if($("#myTable>tbody>tr").length !== numberOfRows){
        numberOfRows = $("#myTable>tbody>tr").length;
        alert("row count changed..");
    }
});

Try It!

见：Is there a JavaScript/jQuery DOM change listener?

【讨论】：

感谢您的回复。是的，这带来了解决方案。但是，即使我将元素添加到 td，DOMSubtreeModified 事件也会触发。这一点都不擅长。我将使用更多的行数（超过 10000 行）。所以，这听起来不适合这些情况。
哇，我不知道 DOM 更改监听器。这对我来说是最好的解决方案。

【解决方案2】：

目前唯一的跨浏览器方法是使用 setInterval 和可能的自定义事件。

setInterval(function() {
    var $t = $("#myTable"),
        rowCount = $t.data("rowCount"),
        rowLength = $t.find("tbody").children().length;
    if (rowCount && rowCount !== rowLength) {
        $t.trigger("rowcountchanged").data("rowCount", rowLength);
    }
    else if (!rowCount) {
        $t.data("rowCount", rowLength);
    }

}, 50);
$("#myTable").on("rowcountchanged",function(){
    alert($(this).data("rowCount"));
});

我建议您在更改行数时手动触发事件，而不是尽可能使用间隔。

更新：
使用 jqGrid refresh 事件。

var rowCount = $("#gridid>tbody>tr").length;
jQuery("#gridid").jqGrid({
...
   refresh: function(){ 
      var currCount = $("#gridid>tbody>tr").length;
      if (currCount !== rowCount) {
          alert("Number of rows changed!");
          rowCount = currCount;
      }
   },
...
});

如果您在点击时手动删除任何行，您也需要在那里运行您的代码，除非它也重新加载网格。

【讨论】：

感谢您的回复。设置间隔并没有为我的情况带来解决方案。
如果你不能使用 setInterval 并且你想要一个跨浏览器的解决方案，唯一的其他选择是使用任何代码来改变表的内容来触发事件。什么是更新表？
jq 网格正在更新表格
loadComplete 没有执行，无论如何感谢@Kevin。而不是我使用刷新现在工作正常。
@Giulio 这是从 2012 年开始的，请随时发布您自己的答案。

【解决方案3】：

http://www.w3.org/TR/DOM-Level-2-Events/events.html — 你可以使用它。但是暂时没有 IE 中的实现或 polyfill。

您还可以使用计时器运行的功能检查 TR 计数。

【讨论】：

我相信您可能会想到DOMNodeInserted，但您应该在文档中直接指定或链接到它的锚点。整个 DOM 事件规范的上下文至少没有帮助。
感谢您的回复。在将其发布到此处之前，我已经查看了此链接。正如我之前所说，没有使用添加/删除行的实现。但是，行数会根据 itemssource 而变化。
正在使用普通的 top.window.oldCount=0; windows.setInterval(200,function(){var count = $("#mytable tr").length; if(count!=top.window.oldCount){top.window.oldCount=count; do_something();}} );函数 do_something(){} 不是一个选项？
是的，itemssource 会根据点击事件而不是基于时间而变化。

【解决方案4】：

我曾经用计时器做过一次。它不是很漂亮，但它几乎适用于我认为的所有浏览器......

http://jsfiddle.net/q5Eqr/

var html;
setInterval(function() {
    var table = $('table');
    if($('table').html() != html){
        alert('Changed!');
        html = $('table').html();
    }
}, 500);

【讨论】：