Question

以下是我的HTML：

<form class="form-horizontal row-fluid" id='form1'>

  <div class="control-group">
    <label class="control-label" for="basicinput">Select Item</label>
    <div class="controls">
      <select tabindex="1" data-placeholder="Select here.." class="span8" id="item_name">
        <option value="">Select Product</option>
        <option value="Category 1">Botts</option>
        <option value="Category 2">Bags</option>
        <option value="Category 3">Table</option>
        <option value="Category 4">Tape</option>
        <option value="Category 4">Frame</option>
      </select>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="basicinput">Item Price</label>
    <div class="controls">
      <div class="input-append">
        <input type="text" placeholder="00.000" class="span8" id="item_price"><span class="add-on">R</span>
      </div>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="basicinput">Item quantity</label>
    <div class="controls">
      <div class="input-append">
        <input type="text" placeholder="00.000" class="span8" id="item_quantity" onblur='Calculate();'>
      </div>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="basicinput">Total Due</label>
    <div class="controls">
      <div class="input-append">
        <input type="text" placeholder="00.000" class="span8" id="total_due" disabled><span class="add-on">R</span>
      </div>
    </div>
  </div>


  <hr>


  <div class="control-group">
    <label class="control-label" for="basicinput">Select Item</label>
    <div class="controls">
      <select tabindex="1" data-placeholder="Select here.." class="span8" id="item_name2">
        <option value="">Select Product</option>
        <option value="Category 1">Botts</option>
        <option value="Category 2">Bags</option>
        <option value="Category 3">Table</option>
        <option value="Category 4">Tape</option>
        <option value="Category 4">Frame</option>
      </select>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="basicinput">Item Price</label>
    <div class="controls">
      <div class="input-append">
        <input type="text" placeholder="00.000" class="span8" id="item_price2"><span class="add-on">R</span>
      </div>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="basicinput">Item quantity</label>
    <div class="controls">
      <div class="input-append">
        <input type="text" placeholder="00.000" class="span8" id="item_quantity2" onblur='Calculate2();'>
      </div>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="basicinput">Total Due</label>
    <div class="controls">
      <div class="input-append">
        <input type="text" placeholder="00.000" class="span8" id="total_due2" disabled><span class="add-on">R</span>
      </div>
    </div>
  </div>


  <hr>

  <div class="control-group">
    <label class="control-label" for="basicinput">Select Item</label>
    <div class="controls">
      <select tabindex="1" data-placeholder="Select here.." class="span8" id="item_name3">
        <option value="">Select Product</option>
        <option value="Category 1">Botts</option>
        <option value="Category 2">Bags</option>
        <option value="Category 3">Table</option>
        <option value="Category 4">Tape</option>
        <option value="Category 4">Frame</option>
      </select>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="basicinput">Item Price</label>
    <div class="controls">
      <div class="input-append">
        <input type="text" placeholder="00.000" class="span8" id="item_price3"><span class="add-on">R</span>
      </div>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="basicinput">Item quantity</label>
    <div class="controls">
      <div class="input-append">
        <input type="text" placeholder="00.000" class="span8" id="item_quantity3" onblur='Calculate3();'>
      </div>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="basicinput">Total Due</label>
    <div class="controls">
      <div class="input-append">
        <input type="text" placeholder="00.000" class="span8" id="total_due3" disabled><span class="add-on">R</span>
      </div>
    </div>
  </div>

  <hr>

  <div class="control-group">
    <label class="control-label" for="basicinput">Select Item</label>
    <div class="controls">
      <select tabindex="1" data-placeholder="Select here.." class="span8" id="item_name4">
        <option value="">Select Product</option>
        <option value="Category 1">Botts</option>
        <option value="Category 2">Bags</option>
        <option value="Category 3">Table</option>
        <option value="Category 4">Tape</option>
        <option value="Category 4">Frame</option>
      </select>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="basicinput">Item Price</label>
    <div class="controls">
      <div class="input-append">
        <input type="text" placeholder="00.000" class="span8" id="item_price4"><span class="add-on">R</span>
      </div>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="basicinput">Item quantity</label>
    <div class="controls">
      <div class="input-append">
        <input type="text" placeholder="00.000" class="span8" id="item_quantity4" onblur='Calculate4();'>
      </div>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="basicinput">Total Due</label>
    <div class="controls">
      <div class="input-append">
        <input type="text" placeholder="00.000" class="span8" id="total_due4" disabled><span class="add-on">R</span>
      </div>
    </div>
  </div>
</form>

Answer 1

首先，应该注意的是，没有方法只使用HTML而无需一遍又一遍地复制/粘贴。您必须在服务器或客户端添加某种脚本语言。对于初学者，我建议使用JavaScript，因为它最简单易用，并且开箱即用。

我习惯使用jQuery，但这是我从基本JavaScript修补的东西。我们的想法是，点击“添加更多”链接，每次点击都会反复复制您的HTML，并将其附加到新的<div>元素。我将要复制的html放在自己的<div>中，这样我就可以克隆/复制<div>内的元素。

请注意我创建的代码花了我大约5分钟来创建，所以你必须完善它，但它应该足以让你开始。

https://jsfiddle.net/vp56otvt/2/

以下是我用来完成这项工作的一些关键JavaScript代码：

document.getElementById("add").addEventListener("click", function(e){
    e.preventDefault();
    var itm = document.getElementById("original-form");
    var cln = itm.cloneNode(true);
    document.getElementById("add-more").appendChild(document.createElement("hr"));
    document.getElementById("add-more").appendChild(cln);
});

Answer 2

通常，我会做类似下面的事情（需要一些JavaScript）。

结果：

这是使用jQuery （一种流行的JS框架）的看法：

    $("table a.addLine").click(function() {
            id++;
            var master = $(this).closest("table");

            // Get a new row based on the prototype row
            var prot = master.find(".prototype").clone();

            // make some changes to the clone
            prot.removeClass("prototype");
            prot.find("input, select").removeAttr("disabled");

            // attach it below the existing ones on the page
            master.find("tbody").append(prot);

            // this is specific to my code, it adds an 'onchange' handler
            // to the select (to fetch item pricing & availability) -- see note
            applyChange();
            return false;
    });

HTML （你可以忽略模板指令）：

<table border="0" id="details" style="margin-top: 3px">
    ...
<td class="smallCentered">(<a class="addLine" href="#">add a line</a>)</td>
    ...
<tr class="prototype">
<th></th>
<td>
${include cat-items 'disabled="disabled" class="itemSelect"'}
</td>
<td>\
<input class="itemQuantity" ${NO} name="quantity" size="3" maxlength="7"></td>
<td>@</td>
<td>$<input class="itemUnitCost" ${NO} ${RO} size="5" maxlength="5"></td>
<td>=</td>
<td>$<input class="itemExtended" ${NO} ${RO} size="7" maxlength="7"></td>
<td class="small">&nbsp;(<a class="removeLine" href="#">remove this line</a>)</td>
</tr>

CSS：

.prototype    { display: none; }

我怎么说“添加下一个项目”，而不是重新显示或重复每个项目的字段？

2 个答案: