如何在添加表格行后更改选择标识的名称？

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.