jQuery how to add index number dynamically to a table

Question

I have created a table and I can add and remove rows using jQuery when a checkbox is checked. My question here is, how can I add an index number at the first column dynamically?

My table:

   <div>
       <table class="config" id="status_table">
            <thead>
                <tr>
                    <th colspan="4"; style= "padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Output Status</th>
                </tr>
                <tr>
                    <th>Index</th>
                    <th>Output Type</th>
                    <th>Output Number</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td >1</td>
                    <td ><p id="type_row_one"></p></td>
                    <td ><p id="number_row_one"></p></td>
                    <td>
                        <img class="image" id = "off" style="margin-left:20px" src="static/OffLamp-icon.png" >
                        <img class="image" id = "on" style="margin-left:20px" src="static/OnLamp-icon.png" >
                    </td>
                </tr>
            </tbody>       
       </table>                     
    </div>

My jQuery:

$('#outputCB').change(function(){
                   if($('#outputCB_1').is(':checked')){
                       $('#status_table tr:last').after('<tr id="output_newrow_1"><td>index+1</td><td>testing</td></tr>');}
                    else{
                        $('#status_table').find("#output_newrow_1").remove();
                    }

                });

So instead of "index+1" I want it to be able to increment from the previous index number, and decrease if the row is removed. How should I go about doing it? Can I assign a variable and ++1 or --1 at the Javascript? I don't really know where to start....

UPDATE:
I tried this but failed:

  var index=1;
           $('#outputCB').change(function(){
               if($('#outputCB_1' ||'#outputCB_2').is(':checked')){
                   index++;
                   $('#status_table tr:last').after('<tr id="output_newrow_'+index+'"><td>'+index+'</td><td id="type_row_'+index+'">type_row_'+index+'</td><td id="num_row_'+index+'">num row '+index+'</td><td><img class="image" src="static/OffLamp-icon.png" style="height:64px; width=64px"/></td></tr>');
                   }
                else{
                    index--;
                    $('#status_table').find("#output_newrow_'+index+'").remove();
                }

            });

it will never remove anything and it added 2 rows at a time when #outputCB_1 is checked again. :/ Why so? (sorry this is too long for a comment.)

can't find the last tr?

Jai
– Jai

2013-04-19 05:10:14 +00:00
Commented Apr 19, 2013 at 5:10 — Jai
– Jai, Commented Apr 19, 2013 at 5:10

ripu1581 · Accepted Answer · 2013-04-19 05:09:27Z

1

just invoke this code everytime you add or delete the row

function updateIndex() 
{ 
    $("#status_table tr").each(function(){
      $( this ).find( "td" ).first().html( $(this).index() + 1 );
    });
}

answered Apr 19, 2013 at 5:09

ripu1581

3001 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Jai Over a year ago

can you plz explain what is $(this) in your html function tr or td, i guess its td and every td in the tr first is 1 so all the first td will output 1.

Jai Over a year ago

another suggestion to you is to use $(this).closest('tr').index() this will output the tr's index

ripu1581 Over a year ago

@Jai It is tr, and then I am entering the value in first td by doing filter on tr's children

Jai Over a year ago

it seems td because you used find() method and your current object is td not tr i guess.

jpmorin Over a year ago

$(this) correspond to the current tr of the loop on which find('td').first() returns the first td of that row, and the index of that row is set as the value of that td.

|

rajesh kakawat · Accepted Answer · 2013-04-19 05:32:22Z

0

try something like this,FIDDLE

        $(function(){
            $('#outputCB').change(function () {
                if (this.checked) {
                    var index = $('#status_table tbody tr').length + 1
                    $('#status_table tr:last').after('<tr id="output_newrow_1"><td>'+index+'</td><td>testing</td></tr>');
                } else {
                    $('#status_table').find("#output_newrow_1").remove();
                }

            });
        })

answered Apr 19, 2013 at 5:32

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

3 Comments

yvonnezoe Over a year ago

thanks guys @qais and @rajesh! but i couldn't be possibly making a function for all output i have.. (i have 96 outputs and there are other similar things...) i'm thinking of using an text input instead of checkbox now... so i will have an Add and a Remove buttons. Will it be easier? i also need to post that number that user input to be displayed.i did it in a simple way by assigning ID to each, get value and display on the table. is there a simpler way?

rajesh kakawat Over a year ago

you can do it in single function by using class instead of id

yvonnezoe Over a year ago

sorry.. but i do not understand :(

Eugene Kardash · Accepted Answer · 2014-03-18 18:07:04Z

0

If you ever want to skip <th> rows from the counter being incremented:

var th_rows_counter = 0;
var all_rows_counter = 0;
$("#icontable tr").each(function() {
    all_rows_counter++;
    $( this ).find( "td" ).first().html( all_rows_counter - th_rows_counter ); // replace <td> content with the counter
    $( this ).find( "th" ).first().each(function(){th_rows_counter++;}); // increment the counter of <th> rows
});

or for skipping <td> with different css style you can use not() function: $( this ).find( "td" ).not(".otherstyle").

answered Mar 18, 2014 at 18:07

Eugene Kardash

3603 silver badges9 bronze badges

Collectives™ on Stack Overflow

jQuery how to add index number dynamically to a table

3 Answers 3

9 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related