listening for table rows count change

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.

It appears OP has tried to use the following jQuery plugin: http://archive.plugins.jquery.com/project/watch (the `watch("length")` bit) — Chris Pratt, Mar 19 '12 at 19:07
Thanks for your response. yes absolutely. But, the above code doesn't work. Could you figure out my mistake? — Rajagopal 웃, Mar 19 '12 at 19:12
There's really not enough code there to be wrong. This particular plugin was added back in 2009, and seems to have been abandoned thereafter. Most likely, it just doesn't work with modern versions of jQuery. — Chris Pratt, Mar 19 '12 at 19:14
@RajaGopal "Could you figure out my mistake?" `.watch` isn't a jquery method. Where did you get it from? — Kevin B, Mar 19 '12 at 20:27

score 5 · Answer 1 · edited May 23 '17 at 10:34

5

You could monitor the DOM event DOMSubtreeModified (note that the event is deprecated, so if someone has a suggestion of a better event to monitor, please change this) which fires on a change to the DOM tree. We can use jQuery's bind function to fire a function when the event is fired on the table. That function can check if the row count has changed.

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

Try It!

See: Is there a JavaScript/jQuery DOM change listener?

edited May 23 '17 at 10:34

Community

1
1

answered Mar 19 '12 at 19:15

Adam

43,763
16
104
144

Thanks for your response. Yes, this brings the solution. But, DOMSubtreeModified event is triggers even i add the element to td. Which is not a good at and all. I will use more number of rows(more than 10000rows). So, it doesn't sound right for these situtions. – Rajagopal 웃 Mar 19 '12 at 19:27
wow, I didn't know about DOM change listener. This is the best solution for me. – Sam Jul 24 '20 at 06:07

Kevin B · Accepted Answer · 2012-03-20T14:15:48.933

2

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.

edited Mar 20 '12 at 14:15

answered Mar 19 '12 at 19:19

Kevin B

94,570
16
163
180

Thanks for your response. Set interval doesnt bring the solution for my case. – Rajagopal 웃 Mar 19 '12 at 19:30
If you can't use setInterval and you want a cross-browser solution, the only other option is to use whatever code is changing the contents of the table to trigger the event. What is updating the table? – Kevin B Mar 19 '12 at 20:26
jq grid is updating the table – Rajagopal 웃 Mar 19 '12 at 21:12
loadComplete is not executing, anyhow thanks @Kevin. Instead of that i used refresh which works fine now. – Rajagopal 웃 Mar 20 '12 at 13:47
Btw, sometimes it is also useful to check the visible rows (see https://stackoverflow.com/questions/5767334/jquery-get-elements-without-display-none and https://github.com/chestercharles/excel-bootstrap-table-filter/issues/38) – Oct 27 '20 at 13:16
1

@Giulio this is from 2012, feel free to post an answer of your own. – Kevin B Oct 27 '20 at 13:17
ok, here it is https://stackoverflow.com/a/64555455/11323942, thank you again – Oct 27 '20 at 13:25

score 0 · Answer 3 · answered Mar 19 '12 at 19:08

0

http://www.w3.org/TR/DOM-Level-2-Events/events.html — you may use this. But there is no implementation or polyfill in IE for a moment.

Also you may check TR count with function runing by the timer.

answered Mar 19 '12 at 19:08

SilentImp

1,865
1
18
28

I believe you're probably thinking of `DOMNodeInserted`, but you should specify or link to directly to its anchor in the document. The context of the entire DOM events spec is not helpful in the least. – Chris Pratt Mar 19 '12 at 19:11
Thanks for your response. I already looked this link before posting it here. As i told earlier, The implementation of adding/deleting rows is not used. But, the number of rows will change based on the itemssource. – Rajagopal 웃 Mar 19 '12 at 19:16
is using ordinar top.window.oldCount=0; windows.setInterval(200,function(){var count = $("#mytable tr").length; if(count!=top.window.oldCount){top.window.oldCount=count; do_something();}}); function do_something(){} not a option? – SilentImp Mar 19 '12 at 19:48
yes, itemssource will vary based on the click events not time based. – Rajagopal 웃 Mar 19 '12 at 20:02

score 0 · Answer 4 · answered Mar 19 '12 at 19:17

I did that once with a timer. It's not very pretty but it works in almost every browser I think...

http://jsfiddle.net/q5Eqr/

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

listening for table rows count change

4 Answers4

Linked