Question

大家好！

一开始，我所有的控件都被禁用。当我单击“添加”或“新建”按钮时，我要启用文本框和“保存”按钮，但“编辑和删除”按钮除外。当我单击“保存”按钮时，我想禁用所有文本框，并在单击按钮的地方启用“编辑和删除”按钮。当我点击“编辑”按钮

我想启用文本框，以便更新表格中的信息。

我正在使用jQuery。我会显示所有代码，以便您可以尝试。

<!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>
  <script>
    var id = 1;
    $(function() {
      $(".btnEdit").bind("click", Edit);
      $(".btnDelete").bind("click", Delete);
      $("#btnAdd").bind("click", Add);
    });

    function Add() {
      $("#tblData tbody").append(
        "<tr>" +
        "<td>" + id + "</td>" + 
        "<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").bind("click", Save);
      $(".btnEdit").bind("click", Edit);
      $(".btnDelete").bind("click", Delete);
      id++;
    };

    function Save() {

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

      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() + "'/>");

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

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

      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() + "'/>");

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

    function Delete() {
      var par = $(this).parent().parent(); 
      par.remove();
      id = 1;
    };
  </script>
</body>
</html>

Answer 1

欢迎使用StackOverflow。

要在保存时禁用文本框，请将这些行添加到Save函数的末尾

tdName.find("input[type=text]").attr('disabled', 'true') tdPhone.find("input[type=text]").attr('disabled', 'true') tdEmail.find("input[type=text]").attr('disabled', 'true')

以同样的方式，要再次启用它们进行编辑，请将这些行添加到您的Edit函数中

tdName.find("input[type=text]").removeAttr('disabled') tdPhone.find("input[type=text]").removeAttr('disabled') tdEmail.find("input[type=text]").removeAttr('disabled')

要工作，请查看此Codepen。 https://codepen.io/santu-parashetti/pen/GYNGBd?editors=1010#0

如何使用jQuery启用和禁用文本框？

1 个答案: