如何說「添加下一個項目」，而不是顯示或重複每個項目的字段？

下面是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>

來源

2016-02-06 M Tshomba

通常情況下，我像做以下（需要一些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; }

來源

2016-02-06 04:55:02

這看起來類似於我嘗試生產，但在編碼我剛開始學習即時通訊非常新JavaScript並沒有掌握框架。 –

這裏是一個介紹給JavaScript：https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript /框架可以產生強烈的黨派之爭。我喜歡jQuery。這是一個簡短的介紹https://www.slideshare.net/mobile/matthewbuchanan/zero-to-hero-a-jquery-primer（其中很多，我敢肯定） –

無論框架與否，基本的想法是，你在頁面上採用現有的結構，「克隆」它，然後將其附加在頁面最後一個下面。我選擇使用隱藏和禁用的「原型」結構，但您可以從頁面上的一個結構開始並使用它。 –

要開始了，應該指出的是，有沒有辦法翻來覆去只用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); 
});

來源

2016-02-06 08:50:38 Err

很多感謝Err，這有很多幫助。 –

如果這個答案對你有幫助，並且你認爲它已經足夠回答你的問題，你可以點擊答案左上角的複選標記來接受我的答案。 – Err

如何說「添加下一個項目」，而不是顯示或重複每個項目的字段？

回答

相關問題