Abwarten, ob sich die Anzahl der Tabellenzeilen ändert

Question

Ich habe die html-Tabelle verwendet. Meine Anforderung ist, ich möchte für die Änderungen der Zeilen zählen zu hören. Ist dies irgendwie zu erreichen?

Hinweis: Ich habe nicht die Funktionen zum Hinzufügen/Löschen einer Zeile hier zu erreichen.

Außerdem habe ich das hier ausprobiert,

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

Aber der obige Code funktioniert bei mir nicht. Könnte jemand von Ihnen wissen, wie man das macht?

Vielen Dank im Voraus,

-Raja.

Answer 1

Sie können das DOM-Ereignis überwachen DOMSubtreeModified ( Beachten Sie, dass das Ereignis veraltet ist. Wenn also jemand einen Vorschlag für ein besseres Ereignis zur Überwachung hat, ändern Sie dies bitte ), die bei einer Änderung des DOM-Baums ausgelöst wird. Wir können jQuery's binden Funktion, um eine Funktion auszulösen, wenn das Ereignis auf der Tabelle ausgelöst wird. Diese Funktion kann prüfen, ob sich die Zeilenzahl geändert hat.

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

Probieren Sie es aus!

Siehe: Gibt es einen JavaScript/jQuery DOM change listener?

Answer 2

Der einzige browserübergreifende Weg, dies zu tun, wäre im Moment mit einem setInterval und möglicherweise einem benutzerdefinierten Ereignis.

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

Ich würde vorschlagen, das Ereignis manuell auszulösen, wenn Sie die Anzahl der Zeilen ändern, anstatt ein Intervall zu verwenden, wenn möglich.

UPDATE:
Verwenden Sie das jqGrid refresh Veranstaltung.

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

Wenn Sie Zeilen beim Klicken manuell löschen, müssen Sie Ihren Code auch dort ausführen, es sei denn, das Raster wird auch neu geladen.

Answer 3

http://www.w3.org/TR/DOM-Level-2-Events/events.html - können Sie dies verwenden. Aber es gibt keine Implementierung oder Polyfill in IE für einen Moment.

Sie können die TR-Zählung auch mit einer Funktion überprüfen, die vom Timer ausgeführt wird.

Answer 4

Ich habe das einmal mit einer Zeitschaltuhr gemacht. Es ist nicht sehr hübsch, aber es funktioniert in fast jedem Browser, glaube ich...

http://jsfiddle.net/q5Eqr/

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