0

Does somebody help me regarding my jquery? How can I make auto-increment in my table td, where upon clicking "new" button, a new row will be created and every row created will start with a number on the first column. First row should start with 1, next column with 2, third column with 3 and so on. I'm using jQuery.

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

    function Add() {
      $("#tblData tbody").append(
        "<tr>" +
        "<td></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++;
    };

    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();
    };
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <button id="btnAdd">New</button>
  <table id="tblData" border = "1px">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Phone</th>
        <th>Email</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

<!-- begin snippet: js hide: false console: true babel: false -->
Swimming Pool
  • 83
  • 1
  • 8

3 Answers3

0

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

Ercan Peker
  • 1,662
  • 10
  • 17
0

You don't need to use jQuery to make that counter; you can do it with plain CSS.

This question isn't quite a dupe of yours but it is very close to it, and the solution is identical:

Can I use CSS content and counters to add custom labels to my grid?

Chris Moschini
  • 36,764
  • 19
  • 160
  • 190
0

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

    function Add() {
      var id;
      if($("#tblData tbody tr").length == 0) {
        id = 1;
      } else {
        id = parseInt($("#tblData tbody tr:last").find("td:eq(0)").text())+1;
      }
      $("#tblData tbody").append(
        "<tr>" +
        "<td>"+ id +"</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);
    };

    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();
    };
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <button id="btnAdd">New</button>
  <table id="tblData" border = "1px">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Phone</th>
        <th>Email</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

<!-- begin snippet: js hide: false console: true babel: false -->

My approach, i am testing to see if the is any tr's within the tbody, if there isn't then id will equal to 1, otherwise it will get the id value from the last tr in the table, then add 1 to it.

Sickaaron
  • 448
  • 1
  • 12
  • 21