Question

我想添加一个完整的div，包括至少一个“ sub-div”，如示例代码所示。这很容易：

我需要在LP-DIV级别上有一个“添加LP”按钮
我需要在AP-DIV级别上有一个“添加AP”按钮
每个新添加的LP应该看起来像第一个（带有1个AP1）
应该有一个选项，可以在意外添加时完全删除LP或AP元素。
动态添加的数据之后将存储在数据库中（如何在表单中传递Elements内容？）

希望您可以帮助我解决此问题。我知道代码示例不是很好，也没有优化，但是为了简单理解，我需要在一个更大的项目中重现我的复杂问题。

我已经尝试了jQuery的append和prepend，并且发现了一些示例，展示了如何在只有一个输入的情况下动态添加元素。我找不到我的问题的任何例子。

<!doctype html>
<html>
<head>
  <title>Form with nested workpackages</title>
</head>
<body>
  <div class="container">
    <form>
      <div id="LP1div" style="border:1px solid black;background:#888888;width:90%;margin:5px;padding:5px;">LP1 div <br />
        <input type="text" class="form-control" id="lp1nameinput" placeholder="<lp1name>">
        <input type="text" class="form-control" id="lp1typinput" placeholder="<lp1typ>">
        <input type="text" class="form-control" id="lp1summeinput" placeholder="<lp1summe>">

        <div id="LP1AP1div" style="border:1px solid black;background:#81F7F3;width:75%;margin:5px;padding:5px;">LP1 AP1 div <br />
          <input type="text" class="form-control" id="lp1ap1nameinput" placeholder="<lp1ap1name>">
          <input type="text" class="form-control" id="lp1ap1typinput" placeholder="<lp1ap1typ>">
          <input type="text" class="form-control" id="lp1ap1summeinput" placeholder="<lp1ap1summe>">
        </div>
        <div id="LP1AP2div" style="border:1px solid black;background:#58ACFA;width:75%;margin:5px;padding:5px;">LP1 AP2 div <br />
          <input type="text" class="form-control" id="lp1ap2nameinput" placeholder="<lp1ap2name>">
          <input type="text" class="form-control" id="lp1ap2typinput" placeholder="<lp1ap2typ>">
          <input type="text" class="form-control" id="lp1ap2summeinput" placeholder="<lp1ap2summe>">
        </div>
      </div>
      <div id="LP2div" style="border:1px solid black;background:#CCCCCC;width:90%;margin:5px;padding:5px;">LP2 div <br />
        <input type="text" class="form-control" id="lp2nameinput" placeholder="<lp2name>">
        <input type="text" class="form-control" id="lp2typinput" placeholder="<lp2typ>">
        <input type="text" class="form-control" id="lp2summeinput" placeholder="<lp2summe>">
        <div id="lp2AP1div" style="border:1px solid black;background:#81F7F3;width:75%;margin:5px;padding:5px;">lp2 AP1 div <br />
          <input type="text" class="form-control" id="lp2ap1nameinput" placeholder="<lp2ap1name>">
          <input type="text" class="form-control" id="lp2ap1typinput" placeholder="<lp2ap1typ>">
          <input type="text" class="form-control" id="lp2ap1summeinput" placeholder="<lp2ap1summe>">
        </div>
        <div id="lp2AP2div" style="border:1px solid black;background:#58ACFA;width:75%;margin:5px;padding:5px;">lp2 AP2 div <br />
          <input type="text" class="form-control" id="lp2ap2nameinput" placeholder="<lp2ap2name>">
          <input type="text" class="form-control" id="lp2ap2typinput" placeholder="<lp2ap2typ>">
          <input type="text" class="form-control" id="lp2ap2summeinput" placeholder="<lp2ap2summe>">
        </div>
      </div>
    </form>
  </div>
</body>
</html>

Answer 1

这将使您入门。您需要找出更好的逻辑来确定LP / AP编号，因为如果您有LP 1和LP 2，则有可能获得重复的ID，然后删除LP 1，然后添加一个LP，您将得到一个重复的LP2。

https://jsfiddle.net/tyddlywink/3vgxfu8w/25/

<!doctype html>
<html>

  <head>
    <title>Form with nested workpackages</title>
  </head>

  <body>
    <div class="container">
      <form>
        <button type="button" id="addLP">Add LP</button>
      </form>
    </div>

    <div id="lpTemplate" style="display: none;">
      <div id="LP-LPtemplate-div" style="border:1px solid black;background:#888888;width:90%;margin:5px;padding:5px;" data-lp-index="-LPtemplate-">LP-LPtemplate- div <br />
        <button type="button" class="removeLP">Remove </button><button type="button" class="addAP">Add AP </button><br/>
        <input type="text" class="form-control" id="lp-LPtemplate-nameinput" placeholder="<lp-LPtemplate-name>">
        <input type="text" class="form-control" id="lp-LPtemplate-typinput" placeholder="<lp-LPtemplate-typ>">
        <input type="text" class="form-control" id="lp-LPtemplate-summeinput" placeholder="<lp-LPtemplate-summe>">
        <div id="lp-LPtemplate-AP-APtemplate-div" style="border:1px solid black;background:#58ACFA;width:75%;margin:5px;padding:5px;">lp-LPtemplate- AP1 div <br />
          <button type="button" class="removeAP">Remove AP</button>
          <input type="text" class="form-control" id="lp-LPtemplate-ap1nameinput" placeholder="<lp-LPtemplate-ap1name>">
          <input type="text" class="form-control" id="lp-LPtemplate-ap1typinput" placeholder="<lp-LPtemplate-ap1typ>">
          <input type="text" class="form-control" id="lp-LPtemplate-ap1summeinput" placeholder="<lp-LPtemplate-ap1summe>">
        </div>
      </div>
    </div>

    <div id="APTemplate" style="display: none;">
      <div id="lp-LPtemplate-AP-APtemplate-div" style="border:1px solid black;background:#58ACFA;width:75%;margin:5px;padding:5px;">lp-LPtemplate- AP-APtemplate- div <br />
        <button type="button" class="removeAP">Remove AP</button>
        <input type="text" class="form-control" id="lp-LPtemplate-ap-APtemplate-nameinput" placeholder="<lp-LPtemplate-ap-APtemplate-name>">
        <input type="text" class="form-control" id="lp-LPtemplate-ap-APtemplate-typinput" placeholder="<lp-LPtemplate-ap-APtemplate-typ>">
        <input type="text" class="form-control" id="lp-LPtemplate-ap-APtemplate-summeinput" placeholder="<lp-LPtemplate-ap-APtemplate-summe>">
      </div>
    </div>
  </body>

</html>

Javascript：

$("#addLP").on("click", function() {
  var self = $(this);
  var currentLPCount = self.parents("form").children("div").length;
  var template = $("#lpTemplate").html();

  template = template.replace(/-LPtemplate-/g, currentLPCount + 1);

  self.parents("form").append(template);
  rebind();


})


var rebind = function() {

  $(".removeLP").off("click");
  $(".removeLP").on("click", function() {
    var self = $(this);

    self.parent("div").remove();

  });
  $(".addAP").off("click");
  $(".addAP").on("click", function() {
    var self = $(this);
    var lpDiv = self.parent("div");
    var currentLPindex = lpDiv.data("lp-index");
    var currentAPCount = lpDiv.children("div").length;
    var template = $("#APTemplate").html();

    template = template.replace(/-LPtemplate-/g, currentLPindex).replace(/-APtemplate-/g, currentAPCount + 1);

    lpDiv.append(template);
    rebind();

  })

  $(".removeAP").off("click");
  $(".removeAP").on("click", function() {
    var self = $(this);

    self.parent("div").remove();

  });


}

如何动态将嵌套元素添加到表单？

1 个答案: