Question

I have two tables. Both tables are editable and both tables should allways be the same :\

It wasn’t my wish.. but the customer wants that 🙂

So my problem is, I need to take care, that both tables have allways the same content ^^ how would you do it? Maybe with jquery and json?

Any ideas?

I use aspx, jquery, json etc pp.

Edit:

Ok here informations. Situation: The customer has a Table where he can add orders during runtime. Each order is one row in a table. The customer can edit some of the input’s in the table. For one table its, no problem… but now I must have two identical tables.

So the scenario is now: Table A and Table B. The user adds, removes or changes a row in table a. Table B will recognize these changes and will synchronize the data.

The structure is:
[ IMAGE LINK ] [ Select ] [ Input ] [ Input ] [ Input ] [ Input ] [ Input ]

I am thinking about recognizing changes to the table and then clone the whole table content to the other table.

Best option would be: JSON bind to the rows 🙂 But I don’t think its possible ;-(

Answer 1

I’d suggest using something along these lines:

$('table td').blur(
    function(){
        var row = $(this).closest('tr').index(),
            col = $(this).index(),
            table = $(this).closest('table');

        $('table')
            .not(table)
            .find('tr:eq(' + row + ')')
            .find('td:eq(' + col + ')')
            .text($(this).text());
    });​

JS Fiddle demo.

---

Edited based on the comment by the OP that:

its a normal table with inputs so nothing special.

$('table input').blur(
    function(){
        var row = $(this).closest('tr').index(),
            col = $(this).closest('td').index(),
            table = $(this).closest('table');

        $('table')
            .not(table)
            .find('tr:eq(' + row + ')')
            .find('td:eq(' + col + ') input')
            .val($(this).val());
    });​

JS Fiddle demo.

References:

• blur()
• closest().
• :eq() selector.
• find().
• index().
• text().
• val().