How to Make a Auto-Increment Id in My Table Td Using Jquery

How to make a AUTO-INCREMENT ID in my table TD using jQuery?

add a counter variable and increment by 1 for every added row.

 var counter = 0;
    $(function () {
        $(".btnEdit").click("click", Edit);
        $(".btnDelete").click("click", Delete);
        $("#btnAdd").click("click", Add);
    });

    function Add() {
        $("#tblData tbody").append(
            "<tr>" +
            "<td>" + counter + "</td>" + //I add td for my ID Column
            "<td><input type='text' /></td>" +
            "<td><input type='text' /></td>" +
            "<td><input type='text' /></td>" +
            "<td><button class='btnSave'>Save</button><button class='btnEdit'>Edit</button><button class='btnDelete'>Delete</button></td>" +
            "</tr>");

        $(".btnSave").click("click", Save);
        $(".btnEdit").click("click", Edit);
        $(".btnDelete").click("click", Delete);
        // id++;
        counter += 1;
    };

    function Save() {

        var par = $(this).parent().parent();

        var tdName = par.children("td:nth-child(1)");
        var tdPhone = par.children("td:nth-child(2)");
        var tdEmail = par.children("td:nth-child(3)");
        var tdButtons = par.children("td:nth-child(4)");

        tdName.html(tdName.children("input[type=text]").val());
        tdPhone.html(tdPhone.children("input[type=text]").val());
        tdEmail.html(tdEmail.children("input[type=text]").val());

        tdName.html("<input type='text' id='txtName' value='" + tdName.html() + "' />");
        tdPhone.html("<input type='text' id='txtPhone' value='" + tdPhone.html() + "' />");
        tdEmail.html("<input type='text' id='txtEmail' value='" + tdEmail.html() + "' />");
        tdButtons.html("<button class='btnSave'>Save</button><button class='btnEdit'>Edit</button><button class='btnDelete'>Delete</button>");

        $(".btnSave").click("click", Save);
        $(".btnEdit").click("click", Edit);
        $(".btnDelete").bind("click", Delete);
    };

    function Edit() {
        var par = $(this).parent().parent();
        var tdName = par.children("td:nth-child(1)");
        var tdPhone = par.children("td:nth-child(2)");
        var tdEmail = par.children("td:nth-child(3)");
        var tdButtons = par.children("td:nth-child(4)");

        tdName.val("<input type='text' id='txtName' value='" + tdName.html() + "' />");
        tdPhone.val("<input type='text' id='txtPhone' value='" + tdPhone.html() + "' />");
        tdEmail.val("<input type='text' id='txtEmail' value='" + tdEmail.html() + "' />");
        tdButtons.val("<button class='btnSave'>Save</button><button class='btnEdit'>Edit</button><button class='btnDelete'>Delete</button>");

        $(".btnSave").click("click", Save);
        $(".btnEdit").click("click", Edit);
        $(".btnDelete").click("click", Delete);
    };

    function Delete() {
        var par = $(this).parent().parent();
        par.remove();
    };

code: https://codepen.io/peker-ercan/pen/qJObwy

jQuery auto increment number on td table

You can work out your html a little bit to ease your task:

<table>
   <thead>
      <th>No.</th>
      <th>Name</th>
   </thead>
   <tbody>
      <tr>
         <td class="center number">1</td>
         <td>David</td>
      </tr>
      <tr>
         <td class="center number">2</td>
         <td>Mark</td>
     </tr>
   </tbody>
</table>

After that manipulating the number becomes easy:

var jsonStr = {
    departmentName : "Sales"
};
var newrow = $('<tr><td class="center number"></td><td>'+jsonStr.departmentName+'</td></tr>');
$("tbody").prepend(newrow);

$("td.number").each(function(i,v) {
    $(v).text(i + 1);
});

Demo
https://jsfiddle.net/w7csmhwk/

Jquery Add Dynamic class name for table with auto increment value

var counter=0;
$("#myTable tr").each(function(){
counter++;
    var self=$(this);
    self.addClass("row_"+counter);
    var tdCounter=0;
    self.find('td').each(function(){
    tdCounter++;
       $(this).addClass("row_"+counter+tdCounter);
    });
});

DEMO 1

Edited:
Code to set margin-left of 1st td for each row

var counter = 0;
$("#myTable tr").each(function () {
    counter++;
    var self = $(this);
    self.addClass("row_" + counter);
    var tdCounter = 0;
    self.find('td').each(function (index) {
        tdCounter++;
        if (index == 0) {
            $(this).css({ "margin-left": 30,'float': 'left'});
        }
        $(this).addClass("row_" + counter + tdCounter);
    });
});

DEMO 2

Auto increment data inside the HTML Table with Javascript or jQuery

This will build the table structure shown

 $(function(){ 
     /* start & end divided by 1000*/
    var start=100, end=2000, increment=25, rowCellCount=4;;
    var html=[];
    for(i=start; i<= end- (increment*rowCellCount)+increment ; i=i+5){
        html.push('<tr>');
        for( j=0; j< rowCellCount; j++){
            var valueStart= (i+j*increment), valueEnd=valueStart+5;

            var text= parseThousands(valueStart)+',000 ';
            text+= valueEnd <= end ? ' - ' + parseThousands(valueEnd)+',000' :'';        

            html.push( '<td class="range" width="15%">'+text+'</td><td class="value" width="10%">VALUE</td>');
         }
         html.push('</tr>');
    }

    $('table').html( html.join(''))

 });

    function parseThousands( val){
        var txt =val.toString();
        if( txt.length==4){       
             txt= txt.slice(0,1) +','+ txt.slice(1)       
        }
        return txt;
    }

DEMO: http://jsfiddle.net/Nck5B/20/

how to auto increment cell id's when cloning table row using JavaScript?

I suggest you to do something like this:

Start with an empty table, using class="hidden" to hide the "template" row,
Use .querySelectorAll('tr').length to know how many tr your table contains,
Use .querySelectorAll("*[id]") to get all your elements with ids and a .forEach() loop to change their ids using the number of trs from the above method.

I used the above method to modify the existing ids of the inputs/output/image from the "template" after copying it, but it could be easy to add other ids on other elements (for example the tds).

Snippet:

var table = document.getElementById("table");      // Find table to append tovar row_typical = document.getElementById("row");  // Find row to copy
function cloneRow() {  var rowAmmount = document.getElementById("rowAmmount").value;  for (var i = 1; i <= rowAmmount; i++) {    var clone = row_typical.cloneNode(true);       // Copy typical row with children    var num = table.querySelectorAll('tr').length; // Get current number of tr    clone.id = "newRow" + num;                     // Change id of tr    var ids = clone.querySelectorAll("*[id]");     // Get all elements with id in tr,    ids.forEach(function(elm) {                    // For all ids      elm.id += num;                               // Add the num of the tr    });    clone.classList.remove('hidden');              // Remove the "hidden" class    table.appendChild(clone);                      // Add new row to end of table  }}

.hidden {  display: none;}

<input id="rowAmmount" placeholder="Row Amount"><button id="add" onclick="cloneRow()">New Row</button><button type="button" onclick="submit()">Submit</button><select id="select">  <option value="html">HTML</option>  <option value="packlist">Packlist</option></select><table>  <thead>    <tr>      <th>Fabric</th>      <th>Fabric Input</th>      <th>Style</th>      <th>Colour</th>      <th>Sizeguide</th>      <th>Image Link</th>      <th>Image</th>      <th>Item Name</th>      <th>Description</th>  </thead>  <tbody id="table">    <tr class="hidden" id="row">      <td><input id="fabric" placeholder="Input"></td>      <td><input id="fabricInput" placeholder="Input 'Yes' 'No' or 'Number'"></td>      <td><input id="style" placeholder="Input"></td>      <td><input id="colour" placeholder="Input"></td>      <td><input id="sizeGuide" placeholder="Input File Name"></td>      <td><input id="imageLink" placeholder="Input"></td>      <td class="output"><img id="image" src=""></td>      <td class="output"><output id="name"></output></td>      <td class="output"><output id="description"></output></td>    </tr>  </tbody></table>

How to Make a Auto-Increment Id in My Table Td Using Jquery