2013-10-21 91 views
-2

我做了一個動態表單,但是當我動態地插入字段時,名稱和ID沒有正確更改。如何設置ID和名稱值?

這裏是我的代碼:

<div id="dataRows"> 
<div class="fieldRow" id="template"> 
    <select class="items" name="items{{counter}}" id="items{{counter}}" style="width:127px; float:left;"><option value="1" selected="selected" disabled="disabled"></option></select> 
    <textarea name="description{{counter}}" id="description{{counter}}" class="description" style="float:left; display: block; height: 30px; width:209px; border-radius:0px; margin: -1px 1px 0;"></textarea> 
    <input type="text" name="unitprice{{counter}}" id="unitprice{{counter}}" class="unitprice" style="float:left; display: block; height: 30px; width:106px; border-radius:0px; margin: -1px -1px 0;"> 
    <input type="text" name="quantity{{counter}}" id="quantity{{counter}}" class="quantity" style="float:left; display: block; height: 30px; width:64px; border-radius:0px; margin: -1px 1px 0;"> 
    <select name="firsttax{{counter}}" id="firsttax{{counter}}" style=" float:left; display: block; height: 31px; width:106px; border-radius:0px; margin: -2px -1px 0;"><option value="1" selected="selected" ></option></select> 
    <select name="secondtax{{counter}}" id="secondtax{{counter}}" style="float:left; display: block; height: 31px; width:107px; border-radius:0px; margin: -2px 0px 0;"><option value="1" selected="selected"></option></select> 
    <input type="text" name="linetotal{{counter}}" id="linetotal{{counter}}" class="linetotal" placeholder="0.00" readonly style="float:right; display: block; height: 31px; width:107px; border-radius:0px; background-color: #F0F0F0; text-align:right; margin: -31px -1px 0;">  
    <input type="button" class="button remove" id="btnDel" value="Remove Row" style="float:right; margin:-29px -110px; color: #ffffff; background-color: #d9534f; border-color: #d43f3a; padding: 3px 10px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.428571429; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; border:1px solid transparent; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;" /> 
    </div> 
</div> 

,這裏是我的動態領域的Java腳本代碼:

jQuery(document).on("ready", function() { 
    initAddRows(); 
}); 

function initAddRows() { 
    var template = jQuery("#template"), 
     dataRows = jQuery("#dataRows") 
     jQuery("#btnAdd").on("click", function() { 
      var newRow = template.clone(true, true), 
       fieldRows = dataRows.find(".fieldRow"), 
       rowNumber = fieldRows.length + { 
        { 
         counter 
        } 
       }; 
      newRow.attr('id', 'row' + rowNumber).find('[id]').each(function() { 
      jQuery(this).attr("id", jQuery(this).attr("id") + rowNumber); 
      jQuery(this).attr("name", jQuery(this).attr("name") + rowNumber); 
      $('#itemscounter').val(+rowNumber); 
      }); 
      fieldRows.filter(":last").after(newRow); 
     }); 
} 

我的字段值items9,description9和我的{{計}} = 9 ,當我生成字段的字段名稱是items910,description910,但我想名稱和id是items10,description10。

我該怎麼做?

+4

總是JS做一些特定的事情! – Overcode

+0

最好不要使用增量名稱和id屬性,因爲它變成了維護地獄。將名稱更改爲'name []'並將值作爲數組傳遞,並將id更改爲類,以便可以對元素進行分組,然後在jQuery中根據需要遍歷它們。 –

回答

1

如果你知道你的ID總是會被「descriptionXX」,用"description" + rowNumber代替jQuery(this).attr("id") + rowNumber(同樣與"item" + rowNumber)。

+0

當我添加「description」+ rowNumber它添加description10所有元素 –