How to change Div Id value when adding rows to a table

I have a problem and the solution to this problem is just a little bit beyond my programming ability... Hopefully someone can help me.

I have a table with a div inside each cell. I need the div id to dynamically change whenever a row or a column is added to the table. The div id's snake around the table, so when a new row or column is added, the div ids have to change. The div ids are used in the Javascript, so they have to dynamically change or the code won't work.

I created picture examples of everything, but since I'm a new member I can't add them. Hopefully my text example below will help you to see what I mean...

2X2 Table with div ids that snake back around:

| div id = 1 | div id = 2 |

| div id = 4 | div id = 3 |

2X3 table with a new column added with how the div ids need to look:

| div id = 1 | div id = 2 | div id = 3 |

| div id = 6 | div id = 5 | div id = 4 |

Also if you have another idea in mind of how this could work, let me know. I'm open to all suggestions.

Update...

I've added a jsfiddle with a small example of my code and how it's being used. At this point I'm thinking I have two options.

As you can see, The draggables drop in order or they revert, so one option is to change the way this is done.

My second option is what has been mentioned here a few times and change the way the div ties to the jQuery开发者_运维问答 droppable code.

Hope this helps.

http://jsfiddle.net/irocmon/wzb5U/

I have just written a quick demo for you at http://jsfiddle.net/65Uwh/. It loops through all the rows, checks if it is odd or even and renames the IDs as appropriate (and sets the value of a span in each div so you can see the number).

You should be able to easily add a button which, on click, adds a row to a table which is an exact duplicate of, for example, the last row (using $("tbody tr:last-child", $(this)).clone();) and appends it to the tbody, then calls the function. Columns should be just as easy.

don't know if i understood your question correctly but here's an example of which i came up with:

http://jsfiddle.net/zUdZR/2/

HTML:

<table border="1">
    <tr><td><div></div></td><td><div></div></td></tr>
    <tr><td><div></div></td><td><div></div></td></tr>
</table>
<button id="r">add row</button><button id="c">add column</button>

jQuery:

$(function(){
    updateIDs();
    $('#r').click(function(){
        $('table').append($('table tr:last-child').clone());
        updateIDs();
    });

    $('#c').click(function(){
        $('table td:last-child').after('<td><div></div></td>');
        updateIDs();
    });


    function updateIDs(){
        $('div').each(function(i){
            var $d = $(this);
            var even = ($d.closest('tr').index()+1)%2==0;
            var tdl = $d.closest('tr').find('td').length;
            var tdi = $d.closest('td').index()+1;
            var id = i+1;
            id = even ?(id-tdi+1)-tdi+tdl:id;
            $(this).text(id);
        });   
    }
});