經過jQuery實時監聽表格行數變化

[本文出自天外歸雲的博客園]

使用bootstrap table組件，當使用過濾器的時候，頁面的表格行數發生變化，此時須要統計表格行數。想要監聽表格變化，如何作呢？

使用場景：有一個表格裏放着許多測試用例，當使用過濾器的時候表格中測試用例的數量發生了變化，此時要從新統計表格中的測試用例個數並反饋在頁面上。

這裏設：表格的tbody元素的id爲monitorTbody，反饋測試用例個數的div的id是caseCount。

下面是兩種實現的方法：

// 實時監聽DOM變化，方法1：jQuery監聽div內容變化（使用這種方法注意id爲caseCount的元素不要位於監聽範圍內，不然控制檯會報錯）
$('#monitorTbody').bind('DOMNodeInserted', function () {
    var count = $("#monitorTbody").find("tr").length;
    $("#caseCount").html("測試用例 " + count.toString() + "條過濾結果");
});

// 實時監聽select組件變化，方法2：動態綁定select的change事件
$("select").change(function () {
    //延時兩秒執行
    setTimeout(function () {
        var count = $("#monitorTbody").find("tr").length;
        $("#caseCount").html("測試用例 " + count.toString() + "條過濾結果");
    }, 2000);
});

使用方法一須要注意：不要讓id爲caseCount的元素在id爲monitorTbody的元素中，不然控制檯會有無限遞歸報錯。