如何增加更多的投入

Question

如果是這種形式

<form action="" method="POST"> 
    <input type="button" value="addmore" onClick="addRow('dataTable')" /> 
    <table id="dataTable" class="TFtable" border="1"> 
    <tr> 
     <td><label>should be auto increment(like (name1, name2, name3 ...))</label> 
     <input type="text" required="required" name="DONINID[]" value=""></td> 
    </tr> 
    </table> 
    <input class="submit" type="submit" value="Confirm &raquo;" /> 
</form> 

這是腳本添加更多=>的script.js更改輸入文本，名稱：

function addRow(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    if(rowCount < 20){       // limit the user from creating fields more than your limits 
     var row = table.insertRow(rowCount); 
     var colCount = table.rows[0].cells.length; 
     for(var i=0; i<colCount; i++) { 
      var newcell = row.insertCell(i); 
      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
     } 
    }else{ 
     alert("Maximum Passenger per ticket is 20."); 

    } 
} 

function deleteRow(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    for(var i=0; i<rowCount; i++) { 
     var row = table.rows[i]; 
     var chkbox = row.cells[0].childNodes[0]; 
     if(null != chkbox && true == chkbox.checked) { 
      if(rowCount <= 1) {       // limit the user from removing all the fields 
       alert("Cannot Remove all the Passenger."); 
       break; 
      } 
      table.deleteRow(i); 
      rowCount--; 
      i--; 
     } 
    } 
} 

現在idia是如何更改標籤名稱，因爲我們添加更多的輸入框應該是自動增量，如：

name1，name2，name3，name3，當我們添加它應該顯示我們。

在此先感謝。

Answer 1

添加一個跟蹤要使用的下一個＃的變量，並在每次添加時將其附加到內容和名稱。

HTML

<form action="" method="POST"> 
<input type="button" value="addmore" onClick="addRow('dataTable')" /> 
<table id="dataTable" class="TFtable" border="1"> 
    <tr> 
     <td> 
      <label>Name 1:</label> 
      <input type="text" required="required" name="name1" /> 
     </td> 
    </tr> 
</table> 
<input class="submit" type="submit" value="Confirm &raquo;" /> 

的JavaScript

var nextName = 2; 

function addRow(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    if (rowCount < 20) { // limit the user from creating fields more than your limits 
     var row = table.insertRow(rowCount); 
     var colCount = table.rows[0].cells.length; 
     for (var i = 0; i < colCount; i++) { 
      var newcell = row.insertCell(i); 
      newcell.innerHTML = '<label>Name ' + nextName + ':</label>' + 
       '<input type="text" required="required" name="name' + nextName + '" />'; 
      nextName++; 
     } 
    } else { 
     alert("Maximum Passenger per ticket is 20."); 

    } 
} 

function deleteRow(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    for (var i = 0; i < rowCount; i++) { 
     var row = table.rows[i]; 
     var chkbox = row.cells[0].childNodes[0]; 
     if (null != chkbox && true == chkbox.checked) { 
      if (rowCount <= 1) { // limit the user from removing all the fields 
       alert("Cannot Remove all the Passenger."); 
       break; 
      } 
      table.deleteRow(i); 
      rowCount--; 
      i--; 
     } 
    } 
} 

演示：http://jsfiddle.net/BenjaminRay/4jnw0t09/