Question

I was using the html table. My requirement is, i want to listen for the changes of rows count. Is there anyway to achieve this?

Note: I don’t have the adding/deleting a row functions here to achieve.

Moreover that, i have tried this,

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

But, the above code doesn’t work for me. Could any of you know how to do this?

Thanks in advance,

-Raja.

Answer 1

The only cross-browser way to do this at the moment would be with a setInterval and possibly a custom event.

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

I would suggest triggering the event manually when you change the number of rows rather than using an interval if possible.

UPDATE:
Use the jqGrid refresh event.

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

If you are manually deleting any rows on click, you will need to run your code there too unless it is also reloading the grid.