通過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的元素中，否則控制台會有無限遞歸報錯。