增加一个编辑功能$(function () { let id = 2; $("#add-button").click(function () { console.log("-----"); $("#add-form").removeClass("hidden") $("#add-form").addClass('visible') }) $("#cancel-button").click(function () { clear() $("#add-form").removeClass("visible") $("#add-form").addClass('hidden') }) $("#save-button").click(function (e) { e.preventDefault() let name = $("#name-input").val() // .val() 等价于 .value let price = $("#price-input").val() id++ $("tbody").append(` <tr> <td>${id}</td> <td>${name}</td> <td>${price}</td> <td> <button class="edit-button">编辑</button> <button class="delete-button">删除</button> </td> </tr> `) clear() $("#add-form").removeClass("visible") $("#add-form").addClass('hidden') }) $('tbody').on("click", '.delete-button', function () { console.log("===", $(this)); $(this).closest('tr').remove() }) function clear() { $("#name-input").val("") $("#price-input").val("") } })

这个代码片段增加了一个编辑功能。具体来说，当点击编辑按钮时，可以将相应的行的数据填充到表单中，用户可以进行修改。当点击保存按钮时，修改后的数据会替换原有数据。

以下是修改后的代码：

$(function () {
  let id = 2;
  
  $("#add-button").click(function () {
    console.log("-----");
    $("#add-form").removeClass("hidden");
    $("#add-form").addClass('visible');
  });
  
  $("#cancel-button").click(function () {
    clear();
    $("#add-form").removeClass("visible");
    $("#add-form").addClass('hidden');
  });
  
  $("#save-button").click(function (e) {
    e.preventDefault();
    let name = $("#name-input").val();
    let price = $("#price-input").val();
    
    if ($("#save-button").data("mode") === "edit") {
      let row = $("#save-button").data("row");
      row.children().eq(1).text(name);
      row.children().eq(2).text(price);
      $("#save-button").data("mode", "add");
      $("#save-button").text("添加");
    } else {
      id++;
      $("tbody").append(`
        <tr>
          <td>${id}</td>
          <td>${name}</td>
          <td>${price}</td>
          <td>
            <button class="edit-button">编辑</button>
            <button class="delete-button">删除</button>
          </td>
        </tr>
      `);
    }
    
    clear();
    $("#add-form").removeClass("visible");
    $("#add-form").addClass('hidden');
  });
  
  $('tbody').on("click", '.delete-button', function () {
    $(this).closest('tr').remove();
  });
  
  $('tbody').on("click", '.edit-button', function () {
    let row = $(this).closest("tr");
    let name = row.children().eq(1).text();
    let price = row.children().eq(2).text();
    $("#name-input").val(name);
    $("#price-input").val(price);
    $("#save-button").data("mode", "edit");
    $("#save-button").data("row", row);
    $("#save-button").text("保存");
  });
  
  function clear() {
    $("#name-input").val("");
    $("#price-input").val("");
  }
});