CODEWITHSUNDEEP
jqueryhtmlhtml-tablesequence
LWA3D
LWA3D

Reputation: 55

How to update number sequence column when remove item from item detail in html table

I'm making an invoice in which order has more than one product order detail table which has number of product column sequence no. for each added product row by user, when user add some product detail rows in it the number of product column sequence auto update by this code:

var n = $(".detail tr").length-0)+1;
var tr = '<td class="no">'+ n +'</td>'

when user want to remove one of the product detail between added rows the no. of sequence column not update how I can do that?

Upvotes: 0

Views: 2788

Answers (2)

Kashif
Kashif

Reputation: 69

//Update Name attribte Increment in each row
$('#dataTable tbody tr').each(function () {
    var this_row = $(this);
    var rowIndex = this_row.index();
    $.each(this_row.find(':input'), function (i, val) {
        var oldName = $(this).attr('name');
        var newName = oldName.replace(/\d+/, rowIndex);
        $(this).attr('name', newName);
    });
});

Upvotes: 0

LWA3D
LWA3D

Reputation: 55

	$(function()
	{
      // Add Row
		$("#add").click(function()
		{
			addnewrow();
		});
      
      // Remove Row
      	$("body").delegate('#remove','click',function()
		{
			$(this).parent().parent().remove();
		});	
      
    });
	function addnewrow()
	{
		var tr = '<tr>' +
                   '<td class="count"></td>'+
                    '<td><input type="text" class="productname"></td>'+
                    '<td><input type="button" value="-" id="remove"></td>'+
                  '</tr>'
		$(".detail").append(tr);
	}
body {counter-reset:section;}
.count:before
{
counter-increment:section;
content:counter(section);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table>
  <thead>
      <tr>
    <th><input type="button" value="+" id="add"></th>  
      </tr>
  </thead>
  <tbody class="detail">
    <tr>
      <td class="count"></td>
       <td><input type="text" class="productname"></td>
       <td><input type="button" value="-" id="remove"></td>
    </tr>
  <tbody>
</table>

Upvotes: 2

Related Questions