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

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

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

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

下面是兩種實現的方法：

// 實時監聽DOM變化，方法1：jQuery監聽div內容變化（控制臺有報錯）
$(‘#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的元素中，否則控制臺會有無限遞歸報錯。

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