Question

我在Codepen代码中找到了我需要的代码，并且有一些疑问。

单击Edit按钮后，我进行了更改，但是当我单击Save时，它们没有保存。如何解决？
如何将按钮Cancel的功能更改为Delete，以删除包括按钮在内的所有表格？
如何使用按钮Add添加功能，即添加表单副本？

var oldValues = null;

$(document)
  .on("click", ".editButton", function() {

    var section = $(this).closest(".formSection");
    var otherSections = $(".formSection").not(section);
    var inputs = section.find("input");

    section
      .removeClass("readOnly");

    otherSections
      .addClass("disabled")
      .find('button').prop("disabled", true);

    oldValues = {};
    inputs
      .each(function() {
        oldValues[this.id] = $(this).val();
      })
      .prop("disabled", false);
  })

  .on("click", ".cancelButton", function(e) {

    var section = $(this).closest(".formSection");
    var otherSections = $(".formSection").not(section);
    var inputs = section.find("input");

    section
      .addClass("readOnly");

    otherSections
      .removeClass("disabled");

    $('button').prop("disabled", false);

    inputs
      .each(function() {
        $(this).val(oldValues[this.id]);
      })
      .prop("disabled", true)

    e.stopPropagation();
    e.preventDefault();
  });

body {
  font: 14px Arial, Helvetica, sans-serif;
}

.formSection {
  padding: 10px;
  margin-bottom: 10px;
  border: 2px solid #ccc;
  transition: background 0.4s ease;
}

.formSection * {
  transition: opacity 0.4s ease;
}

label,
input,
button {
  display: block;
  margin: 5px;
}

input {
  background: transparent;
  border: 1px solid #ccc;
  padding: 2px 1px;
}

label {
  padding-left: 2px;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
}

.actionButtons {
  margin: 5px 5px 0;
}

.cancelButton {
  margin-right: 10px;
  color: #666;
  font-weight: bold;
  text-decoration: none;
}

.saveButton {
  display: inline-block;
  padding: 8px 16px;
  background: #9db0a3;
  color: #fff;
  border: 2px solid #fff;
  cursor: pointer;
  transition: background 0.4s ease;
}

.saveButton:hover,
.editButton:hover {
  background: #849589;
}

.editButton {
  display: none;
  margin-top: 10px;
  padding: 8px 16px;
  background: #9db0a3;
  color: #fff;
  border: 2px solid #fff;
  transition: background 0.4s ease;
}

.formSection.readOnly {
  background: #e5f6ea;
}

input[disabled] {
  color: #000;
  border-color: transparent;
}

.readOnly .actionButtons {
  display: none;
}

.readOnly .editButton {
  display: block;
  cursor: pointer;
}

.formSection.disabled * {
  opacity: .5;
}

.disabled .editButton {
  display: block;
  cursor: default;
}

.disabled .editButton:hover {
  background: #9db0a3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="formSection readOnly">
  <form>
    <label>First Name</label>
    <input type="text" value="Timothy" id="firstName" disabled>
    <label>Last Name</label>
    <input type="text" value="Smithfield" id="lastName" disabled>
    <button type="button" class="editButton">Edit</button>
    <div class="actionButtons">
      <a href="#" class="cancelButton">Cancel</a>
      <button class="saveButton" type="submit">Save</button>
    </div>
  </form>
</div>

<div class="formSection readOnly">
  <form>
    <label>Company</label>
    <input type="text" value="Acme Corporation" id="company" disabled>
    <label>Email</label>
    <input type="text" value="jsmith@acme.com" id="email" disabled>
    <button type="button" class="editButton">Edit</button>
    <div class="actionButtons">
      <a href="#" class="cancelButton">Cancel</a><button class="saveButton" type="submit">Save</button>
    </div>
  </form>
</div>

如何修复代码并添加新的Add（）函数？

0 个答案: