Question

我正在使用html表。我的要求是，我想听行数的变化。反正有没有实现这个目标？

注意：我没有在这里添加/删除行函数来实现。

此外，我试过这个，

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

但是，上面的代码对我不起作用。你们中的任何人都知道怎么做吗？

提前致谢，

-Raja。

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

Try It!

请参阅：Is there a JavaScript/jQuery DOM change listener?

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

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

Answer 3

http://www.w3.org/TR/DOM-Level-2-Events/events.html - 您可以使用此功能。但是IE中暂时没有实现或填充。

您也可以通过计时器运行的功能检查TR计数。

Answer 4

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

http://jsfiddle.net/q5Eqr/

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

Answer 5

可接受的答案非常有用，但是在Javascript中，定义明确的rowCount为0时返回的是False，因此有人会错过这些事件。

要捕获它们，您必须检查(rowCount !== 'undefined' && rowCount !== rowLength)和else if (rowCount == 'undefined')。

有时，仅考虑可见行也很重要（请参阅jQuery get elements without display="none"和https://github.com/chestercharles/excel-bootstrap-table-filter/issues/38）。

最终代码如下

setInterval(function() {
    var $t = $("#table2"),
        rowCount = $t.data("rowCount"),
        rowLength = $t.find("tbody > tr:not([style*='display: none'])").length;
    //console.log("count", rowCount)
    if (rowCount  !== 'undefined' && rowCount !== rowLength) {
        $t.trigger("rowcountchanged").data("rowCount", rowLength);
    }
    else if (rowCount == 'undefined') {
        $t.data("rowCount", rowLength);
    }

}, 50);
$("#table2").on("rowcountchanged",function(){
    console.log($(this).data("rowCount"));
    var $t = $("#table2")
    rowLength = $t.find("tbody > tr:not([style*='display: none'])").length
    console.log("now ", rowLength);
});

注意

就我而言，我将切换到datatables库，该库支持其博客中所述的过滤器事件处理：我已经问过specific question in their forum了，他们完全支持必需的事件处理，如下所示。

table.on('draw', function () {
    // Set the data for the first series to be the map returned from the chartData function
    myChart.series[0].setData(chartData(table));
});

select输入搜索示例中的以下代码将引发-event draw事件：

    column
      .search( val ? '^'+val+'$' : '', true, false )
      .draw();
} );

我认为无论如何我都不会删除答案，当缺少所需的事件处理程序时，对于其他一些light插件来说，这是一个很好的工作方式。使用项目计数并不完美，但这也是一个不错的解决方法，在这种情况下，通过适当使用undefined关键字，javascript代码在技术上是正确的。

监听表行计数变化

5 个答案:

注意