Question

有人对我的jquery有帮助吗？如何在表td中进行自动递增，在其中单击“新建”按钮后，将创建一个新行，并且创建的每一行都将以第一列的数字开头。第一行应从1开始，下一列应从2开始，第三列应从3开始，依此类推。我正在使用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 -->

Answer 1

添加一个计数器变量，并为每个添加的行加1。

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

代码：https://codepen.io/peker-ercan/pen/qJObwy

Answer 2

您不需要使用jQuery来创建计数器。您可以使用普通CSS来做到这一点。

这个问题不是你的错，但是非常接近，解决方案是相同的：

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

Answer 3

$(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 -->

我的方法是，我正在测试以查看tbody中是否有tr，如果没有，则id等于1，否则它将从表中的最后一个tr获得id值，然后加1对此。

如何使用jQuery在我的表TD中创建AUTO-INCREMENT ID？

3 个答案: