Call a Javascript function when a table change content

Question

I have a Javascript code which format a number as a currency. All the content is on a table. At the moment, I have a class money in every <tr> and I call the function when the cell change. FYI, all the cells change at the same time in the table.

var spans = document.getElementsByClassName("money");
for (var i = 0; i < spans.length; i++) {
    var newText = spans[i].innerHTML.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    spans[i].innerHTML = newText;
}

Is there any way instead of have the same class on every cell and catch an event on all of them, to do it on table and have the same result? For example,

$("#mytable").on('change', function() {
  // put my function here and apply to every cell
});

Update: I added the DOMSubtreeModified and tried to iterate through every cell in the table. However, even if I don't have any error on the console, it doesn't seem to work.

<script type="text/javascript">
    $("#resultstable").bind("DOMSubtreeModified", function() {

      $('#resultstable tr').each(function() {
        $('td').each(function (i, cell) {
          cell.innerHTML.replace(/\B(?=(\d{3})+(?!\d))/g, ",");    
      });
    });
    });  

</script>

a table has no change event and a plain html table has no possibility of interact/change the contents, so i guess you use input elements inside the table ? — john Smith, Jan 20 '15 at 11:56
The `class=money` is on the `` of the table. And change the content of the ``. I know that there isn't a "change" event for tables. That's why I ask if there is a way to do something like this — Tasos, Jan 20 '15 at 11:59

score 6 · Accepted Answer · answered Jan 20 '15 at 11:59

Try to use DOMSubtreeModified like,

$("#mytable").bind("DOMSubtreeModified", function() {
    alert("Hurrey table changed");
});

Read the Dom-event-javascript article

$(function(){
    $('button').on('click',function(){
        $('#mytable').append('<tr><td>Next '+($('#mytable tr').length+1)+'</td></tr>');
    });
    $("#mytable").bind("DOMSubtreeModified", function() {
        alert("Hurrey table changed");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
    <tr>
        <td>Next 1</td>
    </tr>
</table>
<br/>
<button>Test</button>

Can you make an online demo for your code? Also, your both table-ids are conflicting. — Rohan Kumar, Jan 20 '15 at 12:26

score 2 · Answer 2 · answered Jan 20 '15 at 12:02

2

You could use setInterval() to monitor the table.

setInterval(function() { check(); }, 1000); //Call check() function every 1s.

In check() you would have some logic to compare.

answered Jan 20 '15 at 12:02

Phil

494
2
21

score 0 · Answer 3 · answered Jan 20 '15 at 12:05

$(function() {
    $(".money").each(function(indexOfElement, elementValue) {
        for (var i = 0; i < elementValue.length; i++) {
            var newText = elementValue[i].innerHTML.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            $(elementValue).html(newText);
        }
    })

});

The above code iterates each element having class "money" and replaces the text with currency text. the script will run while the page is ready

Call a Javascript function when a table change content

3 Answers3

Linked