Auto Increment HTML table row value dynamically using jQuery

Question

I have an HTML table as follows.

<table id="items">

     <tbody>

      <tr>
          <th>SlNo</th>
          <th>Item</th>

          <th>Unit Cost</th>
          <th>Quantity</th>
          <th>Price</th>
      </tr>


       <tr class="item-row">
         <td class="item-name">
          <div class="delete-wpr"><input type="text" value="1" class="slno"/> <a class="delete" href="javascript:;" title="Remove row">X</a></div></td>

           <td><input type="text" class="slno"/></td>           

          <td><input type="text" class="cost"/></td>
          <td><input type="text" class="qty"/></td>
          <td><span class="price"></span></td>
      </tr>  



    <input type="button" value="submit" onClick="storeAndShowTableValues()"/>


    </tbody>

 <tr id="hiderow">
        <td colspan="5"><a id="addrow" title="Add a row">Add a row</a></td>
        <!-- href="javascript:;" --> 
      </tr>

</table>

The add button perfectly works and all. And the Sl:no increases as each row is added. I can also delete the rows too. But the problem is with numbers. Imagine that there are 7 rows. If I delete 6 th row, then the rows should readjust. So I am thinking, whenever a row gets deleted, call some jQuery function, which would reset all the numbers from first row in the incremental order. I am using the following functions in jQuery, but it doesn't work.

The following Add row script WORKS PERFECTLY.

 $("#addrow").click(function(){
index1++;
window.globalCounter++;
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><input type="text" value="'+index1+'" class="slno"/><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td><input type="text" class="slno"/></td><td><input type="text" class="cost"/></td><td><input type="text" class="qty"/></td><td><span class="price"></span></td></tr>');


if ($(".delete").length > 0) $(".delete").show();
bind();

});

The delete row function also works, but the script to re-order table indexes doesnt work. SO I am thinking about, once the button has been pressed to delete a row, execute a jQuery which removes the selected row at first, and then reset the indexes of all the numbers from 1.

 $('#items').on('click', ".delete", function(){


     $('#items').find('tr').find('td:first').each(function(index){   //This function doesnt work. 
    $(this).text(index+1);
});

    $(this).parents('.item-row').remove();


    if ($(".delete").length < 2) $(".delete").hide();
});

Don't use js/jq for that: stackoverflow.com/a/23778963/1414562 — A. Wolff
– A. Wolff, Commented Jan 20, 2016 at 13:59

jeroen · Accepted Answer · 2016-01-20 14:00:40Z

1

An easy way would be to forget the number you are using now and set name attributes on the inputs. If you make them arrays, they will be sent in automatically as a 0-indexed list:

<input name="slno[]" type="text" class="slno"/>
// etc.

Now you can easily serialize your form, send it in and process it at the backend without having to build the data manually.

answered Jan 20, 2016 at 14:00

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

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

2 Comments

user5810512 Over a year ago

And how would I give serial values like 1,2,3.....etc to the slno[] value? And how will the indexes reorder when a particular row is deleted?

jeroen Over a year ago

@AkhilKPAULOSE Like I said, the browser or jQuery (using serialize) will do that automatically when you send the post.

Collectives™ on Stack Overflow

Auto Increment HTML table row value dynamically using jQuery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related