Auto generate Serial Number in HTML Table using jQuery

amars

SOLVED CLOSED ACTIVE ANSWERED
User: amars
Posted: on May 29, 2018 11:59 PM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 27196
Sample Code: Download

this is my html table structure with some columns now i want to add new column srno which will auto generate number whenever i will add row to table then it will auto increment like 1,2,3 etc.

var div;
var data1 = JSON.stringify(getAllInventoryRecords());//used to get data from controls
 
var d1 = JSON.parse(data1);
// alert(d1);
for (var i = 0; i < d1.length; i++) {
    //  alert(tabledata[i].DocumentNumber);
    
    tr = $('<tr/>');
    tr.append("<td>" + d1[i].description + "</td>");
    tr.append("<td>" + d1[i].Qty + "</td>");
    tr.append("<td>" + d1[i].unitprice + "</td>");
    tr.append("<td >" + d1[i].value + "</td>");
    tr.append("<td>" + d1[i].disc + "</td>");
    tr.append("<td>" + d1[i].tax +"%", "</td>");
    tr.append("<td>" + d1[i].cgst + "</td>");
    tr.append("<td>" + d1[i].sgst + "</td>");
    tr.append("<td>" + d1[i].igst + "</td>");
    tr.append("<td><button id='btndelete'  style='height:28px;width:107px;' class='btn btn-default btn-sm'><i class='glyphicon glyphicon-ok'></i> Delete</button></td>");
   
    $('#tblCustomers').append(tr);
 
   
    $('#lbltotal').html(d1[i].value);//this label is use to get sum of value column
}

Example

-------------------------------------------------------------

1 | Cycle |2 |1 |1 |ss |1 |1

2 | AC |2 |2 |4 |qq |1 |2

dharmend...

0 1

Reply
ANSWER
User: dharmendr
Replied: on May 30, 2018 12:01 AM
Report

Hi amars,

Check this example. Now please take its reference and correct your code.

HTML

<div>
    <table id="tblCustomers" class="table table-responsive">
        <tr>
            <th>Sr. No</th>
            <th>description</th>
            <th>Qty</th>
            <th>unitprice</th>
            <th>value</th>
            <th>disc</th>
            <th>tax</th>
            <th>cgst</th>
            <th>sgst</th>
            <th>igst</th>
        </tr>
    </table>
    Total:&nbsp;<span id="lbltotal"></span>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var customers = new Array();
        var obj = {};
        obj.description = "Cycle";
        obj.Qty = "2";
        obj.unitprice = "1";
        obj.value = "2";
        obj.disc = "1";
        obj.tax = "1";
        obj.cgst = "1";
        obj.sgst = "1";
        obj.igst = "1";
        customers.push(obj);
        obj = {};
        obj.description = "AC";
        obj.Qty = "2";
        obj.unitprice = "2";
        obj.value = "4";
        obj.disc = "1";
        obj.tax = "2";
        obj.cgst = "2";
        obj.sgst = "2";
        obj.igst = "2";
        customers.push(obj);
        var tr;
        var total = 0;
        var d1 = customers;
        for (var i = 0; i < d1.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + (i + 1) + "</td>");
            tr.append("<td>" + d1[i].description + "</td>");
            tr.append("<td>" + d1[i].Qty + "</td>");
            tr.append("<td>" + d1[i].unitprice + "</td>");
            tr.append("<td>" + d1[i].value + "</td>");
            tr.append("<td>" + d1[i].disc + "</td>");
            tr.append("<td>" + d1[i].tax + "%", "</td>");
            tr.append("<td>" + d1[i].cgst + "</td>");
            tr.append("<td>" + d1[i].sgst + "</td>");
            tr.append("<td>" + d1[i].igst + "</td>");
            tr.append("<td><button id='btndelete'  style='height:28px;width:107px;' class='btn btn-default btn-sm'><i class='glyphicon glyphicon-ok'></i> Delete</button></td>");
            $('#tblCustomers').append(tr);
            total += parseFloat(d1[i].value);
        }
        $('#lbltotal').html(total); //this label is use to get sum of value column 
    });
</script>

Demo

Auto generate Serial Number in HTML Table using jQuery

Company

Explore

Follow us

Contact Us