遞增錶行腳本

Question

我有這個增量行腳本，允許用戶通過'添加行'按鈕將行添加到表中。該按鈕添加行，但從我看到它不分配新的字段一個新的ID即第一行是FieldName_0，下一行應該是FieldName_1等

然後我有代碼，當提交通過每個字段並插入到表中。

不確定爲什麼字段沒有被分配新的ID。任何幫助讚賞。

請注意該按鈕在我的程序中工作，但在下面的代碼片段中沒有，希望只是編寫的代碼就足夠了。

< script language = "javascript" > 
 
    var counter = 0; 
 
// Start a counter. Yes, at 0 
 
function add_row_desc() { 
 
    counter++; 
 
    // I find it easier to start the incrementing of the counter here. 
 
    var newFields = document.getElementById('newrowdesc').cloneNode(true); 
 
    newFields.id = ''; 
 
    newFields.style.display = ''; 
 
    var newField = newFields.childNodes; 
 
    for (var i = 0; i < newField.length; i++) { 
 
    var theName = newField[i].name 
 
    if (theName) 
 
     newField[i].name = theName + counter; 
 
    // This will change the 'name' field by adding an auto incrementing number at the end. This is important. 
 
    } 
 
    var insertHere = document.getElementById('newrowdesc'); 
 
    // Inside the getElementById brackets is the name of the div class you will use. 
 
    insertHere.parentNode.insertBefore(newFields, insertHere); 
 
} 
 

 
< /script>

<table class="table table-striped table-condensed"> 
 
    <thead> 
 
    <tr> 
 
     <th class="col-sm-2">Quantity</th> 
 
     <th class="col-sm-5">Job Description</th> 
 
     <th class="col-sm-2">Total PP</th> 
 
     <th class="col-sm-2">Finished Size</th> 
 
     <th class="col-sm-1"></th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr id="rowdesc"> 
 
     <td> 
 
     <input name="JobQuantity_0" type="text" class="form-control" /> 
 
     </td> 
 
     <td> 
 
     <input name="JobDescription_0" type="text" class="form-control" /> 
 
     </td> 
 
     <td> 
 
     <input name="JobTotalPP_0" type="text" class="form-control" /> 
 
     </td> 
 
     <td> 
 
     <input name="JobFinSize_0" type="text" class="form-control" /> 
 
     </td> 
 
     <td> 
 
     <input type="button" class="form-control" id="add_row_desc()" onclick="add_row_desc()" value="Add Row" /> 
 
     </td> 
 
    </tr> 
 
    <tr id="newrowdesc" style="display: none;"> 
 
     <td> 
 
     <input type="text" class="form-control" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="form-control" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="form-control" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" class="form-control" /> 
 
     </td> 
 
     <td></td> 
 
    </tr>

Answer 1

你有沒有在你的代碼中使用計數器變量的任何地方。只需更新以下行，它應該可以工作。

newFields.id = 'FieldName_0' + counter;