Question

How do I change the select id's name after add table rows?之前的问题案例已经完成，但是还有一个问题是在删除行后更改选择ID的名称或编号？我尝试过使用replace和childnodes，但它们仍无法正常工作。

例如：我添加了三行，

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通过指定DOM

selector

在每个元素的remove()上，使用setAttribute

id

loop

＆＃13;

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!')
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

试试这个：

在删除功能中添加一行 -

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

作为

   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].childNodes[0].children[0].id = 'facility'+(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 + '"');
    }

}

}

按删除行按钮后，如何按顺序更改ID的名称或编号

2 个答案: