如何在添加表格行後更改選擇標識的名稱？

Question

在表中我有兩個選擇，都從數據庫中獲取值。 當按下添加按鈕添加新行時，我想要將選擇ID的名稱更改爲 facility2, currency2 facility3, currency3 等等。但我不知道如何改變它們。

這是我所創建的表：

<table id="tableInformation"> 
    <tr> 
    <td><label>No</label></td> 
    <td><label>Facility</label></td> 
    <td><label>Currency</label></td> 
    <td></td> 
    </tr> 
    <tbody> 
    <tr> 
    <td><label>1</label></td> 
    <td><div id="facility"> 
     <select id="facility1" name="facility"> 
      <option value=""></option> 
      <option value="AL">AL</option> 
      <option value="BL">BL</option> 
      <option value="CL">CL</option> 
     </select> 
    </td> 
    <td><div id="currency"> 
     <select id="currency1" name="currency"> 
      <option value=""></option> 
      <option value="idr">IDR</option> 
      <option value="usd">USD</option> 
      <option value="aud">AUD</option> 
      <option value="jpy">JPY</option> 
     </select> 
    </td> 
    <td><input type="button" id="btnAddRows" value=" + " 
      onclick=\'addRows()\' /> 
    </tr> 
    </tbody> 
</table> 

這是JavaScript：

function addRows() { 
    var table = document.getElementById('tableInformation'); 
    var rowCount = table.rows.length; 
    var iteration = rowCount -1; 
    var numbers = iteration +1; 
    var row = table.insertRow(rowCount); 
    var colCount = table.rows[0].cells.length; 

    // Cell for number 
    var cell = row.insertCell(0); 
    var label = document.createElement('label'); 
    label.textContent = numbers; 
    cell.appendChild(label); 

    for(var i=1; i<colCount; i++) { 

     var newcell = row.insertCell(i); 
     newcell.innerHTML = table.rows[1].cells[i].innerHTML; 
     //alert(table.rows[1].cells[i].innerHTML); 
     //alert(newcell.childNodes); 

    } 

} 

在此先感謝。

Answer 1

很多方法可以做到這一點。這裏有一點你已經有的東西。

地址：

.replace(/id="(.+)1"/, 'id="$1' + rowCount + '"') 

...到：

table.rows[1].cells[i].innerHTML 

---

說明：您複製的第一行的每個單元的HTML到新行。單元格對象上的innerHTML屬性是一個字符串。因此，使用字符串replace函數在將該字符串應用到新單元格之前修改該字符串。

此處應用的replace函數使用變量rowCount將id屬性值中的數字1替換爲新的行數。

的replace函數圖案（第一自變量）查找正則表達式模式：/id="(.+)1"/，

• 的字符串起始id="，
• 然後捕獲任何種類(.+)，
的一個或多個字符
• 和一個數字1後跟一個報價1"。

...例如id="currency1"。

在更換（第二個參數）的$1提供在第一組括號捕獲的文本的值，在這種情況下：(.+)。

（這裏沒有使用，但$2將捕獲的第二組，$3將捕獲的第三組，等等。如果括號是嵌套的，外括號內括號之前捕獲。）

下面是所得for塊：

for(var i=1; i<colCount; i++) { 
    var newcell = row.insertCell(i); 
    newcell.innerHTML = table.rows[1].cells[i].innerHTML.replace(/id="(.+)1"/, 'id="$1' + rowCount + '"'); 
} 

JSFiddle example.