delete td and change cell data

I have table with many 开发者_开发知识库rows. Each row is identified in UI with some ordered number such as 1, 2, 3 etc. This ordered number is also shown in UI.

When a row is deleted, the order should be changed dynamically

If second row is deleted. Then the other rows should be ordered again in sequence as 1, 2, 3 etc.

How can I do this?

You could execute something like this upon deletion of a row:

$("tr").click(function() {
    var $table = $(this).closest('table');
    $(this).remove();
    $table.find('tr > td:first-child').map(function() {
        $(this).html($(this).closest('tr')[0].rowIndex + 1);
    });
});

Demo: http://jsfiddle.net/karim79/E5bCr/

the demo is good. but i think the question is how to re order the numbering in the table. i had do similar to this but in a different way.. i did not find how to re order the numbering but instead since the table content is from the database. i re-query on the database and fetch all the records..

$("#my_table tbody").find("tr").remove(); //remove the tr's from below tbody
$.getJSON("file.php",function(json){
ctr = 1;
for(i=0;i<json.length;i++){
 $('#my_table tbody:first').append('<tr><td>'+ctr+'</td></tr>');
ctr++;
});

this is my temporary solution.

<script>
    var gCounter = 1; // global
    $('table').bind('row_deleted',
        function () {
            gCounter = 1; // reset
            $(this).find('tbody tr').each(
                function() {
                    $(this).find(':first-child').html(gCounter++);
                });
        });

    $('#your_table').trigger('row_deleted');

</script>