监听表格行数变化

Question

我正在使用HTML表格。我的需求是，我想监听行数的变化。有什么方法可以实现这一点吗？

注意：我没有添加/删除行的功能。

此外，我已经尝试过这个：

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

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

提前感谢，

-Raja.

- Rajagopal 웃

---

看起来 OP 尝试使用了以下 jQuery 插件：http://archive.plugins.jquery.com/project/watch（其中包含 watch("length") 代码）。 - Chris Pratt

谢谢您的回复。是的，绝对没错。但是，上面的代码不起作用。您能找出我的错误吗？ - Rajagopal 웃

那里的代码实在太少了，不足以出错。这个特定的插件是在2009年添加的，之后似乎就被放弃了。很可能它只是不能与现代版本的jQuery一起使用。 - Chris Pratt

@RajaGopal "你能找出我的错误吗？" .watch 不是 jQuery 的方法。你从哪里得到它的？ - Kevin B

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

试一下！

参见：有没有JavaScript/jQuery DOM更改监听器？

- Adam

---

感谢您的回复。是的，这解决了问题。但是，即使我将元素添加到td中，DOMSubtreeModified事件也会触发，这一点并不好。我将使用更多的行（超过10000行）。因此，在这些情况下，这听起来并不正确。 - Rajagopal 웃

哇，我不知道有 DOM 更改监听器。这对我来说是最好的解决方案。 - Sam

Answer 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;
      }
   },
...
});

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

- Kevin B

---

谢谢您的回复。对于我的情况，设置间隔并不能解决问题。 - Rajagopal 웃

如果您无法使用setInterval，且需要一个跨浏览器的解决方案，则唯一的其他选择是使用更改表格内容的任何代码来触发事件。那么是什么在更新表格呢？ - Kevin B

jq Grid正在更新表格。 - Rajagopal 웃

loadComplete没有执行，不过还是谢谢@Kevin。我改用refresh了，现在可以正常工作了。 - Rajagopal 웃

@Giulio，这是2012年的内容，你可以随意发表自己的答案。 - Kevin B

Answer 3

我曾经用计时器做过这件事。虽然不太美观，但我认为它在几乎所有浏览器中都能正常工作...

http://jsfiddle.net/q5Eqr/

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

- Alex

Answer 4

http://www.w3.org/TR/DOM-Level-2-Events/events.html — 你可以使用这个链接。但是目前IE浏览器还没有实现或者填充。

同时你可以通过计时器来运行函数以检查TR计数。

- SilentImp

---

我相信你可能在想 DOMNodeInserted，但你应该直接指定或链接到文档中的锚点。整个 DOM 事件规范的上下文对此毫无帮助。 - Chris Pratt

谢谢您的回复。在发布这个问题之前，我已经查看了此链接。正如我之前所说，添加/删除行的实现并未被使用。但是，行数将根据项目源而发生变化。 - Rajagopal 웃

使用普通的 top.window.oldCount=0; windows.setInterval(200,function(){var count = $("#mytable tr").length; if(count!=top.window.oldCount){top.window.oldCount=count; do_something();}}); function do_something(){} 不是一个选项吗？ - SilentImp

是的，itemssource将根据点击事件而不是时间变化。 - Rajagopal 웃