添加 table 行后如何更改 select id 的名称？

Question

在 table 中我有两个 select，它们都从数据库中获取值。按添加按钮添加新行时，我想将 select id 的名称更改为 facility2, currency2 facility3, currency3 等等。但是我不知道怎么改。

这是我创建的table：

<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="' + rowCount + '"')

...至：

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

说明：您正在将 HTML 从第一行的每个单元格复制到新行中。单元格对象上的 innerHTML 属性是一个字符串。因此，在将其应用于新单元格之前，请使用字符串 replace 函数修改该字符串。

此处应用的 replace 函数使用变量 rowCount.[=30 将 id 属性值中的数字 1 替换为新的行号。 =]

replace 函数模式 （第一个参数） 查找正则表达式模式：/id="(.+)1"/、

以id="、
然后捕获一个或多个任意类型的字符(.+)、
数字 1 后跟引号 1"。

...例如 id="currency1".

替换（第二个参数）中的</code>提供第一组括号中捕获的文本的值，在本例中：<code>(.+).

（此处未使用，但 </code> 将捕获第二组，<code> 将捕获第三组，依此类推。如果嵌套了括号，则在内部括号之前捕获外括号。）

这是生成的 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="' + rowCount + '"');
}

JSFiddle example.

添加 table 行后如何更改 select id 的名称？

How do I change the select id's name after adding table rows?

javascript

html

insert

cells