a good way to check which row is changed (html/jquery/php)

Question

I've got an html table that is being generated with php.

This list can have records of over 20000 records, so I added a paging on this list. In this list you can modify the rows you like, when you hit save, it saves the changes in a temp table and only after you hit apply changes, the actual changes are applied in the main table. Before you hit apply changes, it shows in the list the changed rows with an indicator.

Now all this works, but currently when you only change 1 row of the 50 that are shown, it saves the 50 rows in the temp table. Which gives me an indicator on all 50 records (not really what I want).

My question is: what is a good way to know which row is changed before saving this in my temp table?

Answer 1

You can use event delegation in JavaScript. You attach an event listener at a parent level, not on individual children, then listen for events and check the target.

Each Event object has a target property. The target is the object that triggered the event.

You can see a good example on the jQuery documentation website: http://docs.jquery.com/Events/jQuery.Event#event.target

Event delegation is especially useful on large amounts of data that need event handlers. Read more about what event delegation is at: http://icant.co.uk/sandbox/eventdelegation/

Answer 2

Okay I've found a solution to my own problem.

With a little help of jquery I managed to achieve my solution.

I added a hidden text field in my table with a class="changed".

I've got 4 editable fields (2 date fields and 2 checkboxes) on each field I added a jquery click function based on the class name that is the same for all fields in my list (4 different class names for each row).

jquery example checkbox:

$('input.activated').click(function(){

    $(this).parents('tr').find('input.changed').attr('value', 'changed');

});

So when I now click save modifications -> my php code checks if the hidden field equals "changed" to save the changed rows in my temp table.

This seems to me a good solution.