javascript - 按删除行按钮后如何依次更改 ID 的名称或号码

Question

我之前的问题 如何在添加表行后更改 select id 的名称？ 案例已完成，但还有一个问题是在删除行后更改 select id 的名称或编号？我尝试过使用替换和子节点，但它们仍然不起作用。

例如: 我添加三行，

facility1
facility2
facility3

然后删除#2的行，这正是我想要的

facility1
facility2

但是我得到了，

facility1
facility3

这是表格:

<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()\' />
         <input type="button" id="btnRemRows" value=" - "
          onclick=\'removeRows(this)\' />
  </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.replace(/id="(.+)1"/,'id="$1' + 
        rowCount + '"');

    }

}


function removeRows(index) {

    var i = index.parentNode.parentNode.rowIndex;
    var table = document.getElementById('tableInformation');
    var rowCount = table.rows.length;
    var iteration = rowCount -1;
    /*var numbers = iteration +1;*/

    if(iteration == 1) {
        alert("Cannot remove");
    }else{
        table.deleteRow(i);
        //alert(iteration);
        for(var j=1; j<iteration; j++) {

            table.rows[j].cells[0].childNodes[0].id = 'number'+(j-1+1);
            table.rows[j].cells[0].childNodes[0].textContent = (j-1+1);

            table.rows[j].cells[1].innerHTML.replace(/id="(.+)1" 
            /,'id="$1' + rowCount + '"');
            table.rows[j].cells[2].innerHTML.replace(/id="(.+)1" 
            /,'id="$1' + rowCount + '"');
            table.rows[j].cells[3].innerHTML.replace(/id="(.+)1" 
            /,'id="$1' + rowCount + '"');
            table.rows[j].cells[4].innerHTML.replace(/id="(.+)1" 
            /,'id="$1' + rowCount + '"');
        }

    }

}

Answer 1

• 使用.cloneNode复制现有元素。
• 使用.remove()从 DOM 中删除元素。
• 使用querySelector通过指定 selector 从 DOM 选择元素
• 在每个元素的 remove() 上，使用 setAttribute 在循环中重新分配 id 属性

var table = document.getElementById('tableInformation');

function addRows() {
  var toClone = document.getElementById('toClone').cloneNode(true);
  toClone.removeAttribute('id');
  var len = table.querySelectorAll('tr').length;
  toClone.querySelector('label').textContent = len;
  toClone.querySelector('[name="facility"]').setAttribute('id', 'facility' + len);
  toClone.querySelector('[name="currency"]').setAttribute('id', 'currency' + len);
  table.appendChild(toClone.cloneNode(true));
}

function removeRows(elem) {
  var trElems = table.querySelectorAll('tr');
  if (trElems.length > 2) {
    elem.parentNode.parentNode.remove();
    trElems = table.querySelectorAll('tr');
    for (var i = 1, len = trElems.length; i < len; i++) {
      trElems[i].querySelector('label').textContent = i;
      trElems[i].querySelector('[name="facility"]').setAttribute('id', 'facility' + i);
      trElems[i].querySelector('[name="currency"]').setAttribute('id', 'currency' + i);
    }
  } else {
    alert('Atleast one row should be there!')
  }
}

<table id="tableInformation">
  <tr>
    <td>
      <label>No</label>
    </td>
    <td>
      <label>Facility</label>
    </td>
    <td>
      <label>Currency</label>
    </td>
    <td></td>
  </tr>
  <tr id='toClone'>
    <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>
      </div>
    </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>
      </div>
    </td>
    <td>
      <input type="button" id="btnAddRows" value=" + " onclick='addRows()' />
      <input type="button" id="btnRemRows" value=" - " onclick='removeRows(this)' />
  </tr>
</table>