Question

我正在创建一个包含许多动态元素的长HTML表单（添加了'+'和' - ' - '）并使用jquery的.clone（）方法，但我对它不是很满意。我想要的是点击'+'，我将选择预定义的html并替换一些部分，如'id / name'，然后只是附加到现有部分。这将使我的逻辑非常干净。例如我有html，我克隆'+'点击并附加到现有视图（这是正常工作）

<div class='row'>
  <input id="ip_1" name="ip_1">
  <input date... id="dt_1" name="dt_1">
  <select ... id="sel_1">
  <br>
  <input with text ... id="ip_2">
</div>

我想要的是，我将保存在javascript变量中的html以上，然后只需传递new_id，new_name或其他参数来获取类似TT2，Jinja2或Angular的新html，但是我想保持它的亮度

function x(v, d, s, d2)  = {
  return '<div class='row'>
     <input id="{{ v }}" name="{{ v }}">
     <input date... id="{{ d }}" name="{{ d }}">
     <select ... id="{{ s }}">
     <br>
     <input with text ... id="{{ d2 }}">
  </div>'
}

有什么建议吗？

Answer 1

您可以让Javascript为您完成所有工作。以下函数选取块中的最后一行，然后相应地更新各个元素。唯一的问题（我会让你解决）是，如果你不能在现有的块之间插入一个块。

function x(){
   // get all row elements
   var rows = document.getElementsByClassName('row');
   var last = rows.length - 1;

   //--- get current last element to duplicate
   var clone = rows[last].cloneNode(true);

   //--- get all the inputs with in the duplicate
   var inp = clone.getElementsByTagName('input');
   //-- update all the input elements
   inp[0].id = inp[0].name = IncrementValue(inp[0].id);
   inp[1].id = inp[1].name = IncrementValue(inp[1].id);
   inp[2].id = inp[2].name = IncrementValue(inp[2].id);;
   //--- get the select element
   inp = clone.getElementsByTagName('select');
   inp[0].name = IncrementValue(inp[0].id);
   //--- append all to the main div
   document.getElementsByTagName('body')[0].appendChild(clone);
}
function IncrementValue( str ) {
   var v = str.split('_');
   v[1]++;
   return v.join('_');
}

上述脚本document.getElementsByTagName('body')[0]需要更改为您的输入指向div容器。 html需要一个按钮：<button name='add' onclick="x()"> + </button>

使用jquery或javascript生成html的模板化

1 个答案: