javascript - 克隆后如何禁用原始删除按钮也为 id 文本框自动递增

Question

我有克隆行代码，其中包括文本框和删除按钮，我只想在克隆后禁用原始删除按钮，我还需要 id 文本框在克隆时自动增加

function tablerow(addRow) {
  var table = document.getElementById('tablebody');
  var row = document.getElementById('tablerow');
  var clone = row.cloneNode(true);
  clone.id = "newid";
  var InputType = clone.getElementsByTagName('input');
  for (var i = 0; i < InputType.length; i++) {
    InputType[i].value = '';
  }
  table.appendChild(clone);
}

function deleteRow(delRow){
while (delRow.parentNode && delRow.tagName.toLowerCase() != 'tr') {
delRow = delRow.parentNode;
}
if (delRow.parentNode && delRow.parentNode.rows.length > 1) {
delRow.parentNode.removeChild(delRow);
}
}

<button type="button" onclick="tablerow()">Add</button>
<table>
  <tbody id="tablebody">
    <tr id="tablerow">
      <td><input type="text" value="1" disabled/></td>
      <td><input type="text"/></td>
      <td><button type="button"/>Delete</button onClick="deleteRow(this)"></td>
    </tr>
  </tbody>
</table>

标签： javascript

Answer 1

这是一个混合的 JS/CSS 解决方案

function tablerow(addRow) {
  var table = document.getElementById('tablebody');
  var row = document.getElementById('tablerow');
  var clone = row.cloneNode(true);
  clone.id = "newid";
  [...clone.querySelectorAll('input')].forEach(inp => {
    if (inp.classList.contains("del")) inp.classList.remove("first")
    else inp.value = "";
  })
  table.appendChild(clone);
}
window.addEventListener("load", function() {
  document.getElementById("add").addEventListener("click", function() {
    tablerow()
  })
  document.getElementById("tablebody").addEventListener("click", function(e) {
    var tgt = e.target;
    if (tgt.classList.contains("del")) tgt.closest("tr").remove()
  })
})

.first {
  visibility: hidden;
  pointer-events: none;
}

<button type="button" id="add">Add</button>
<table>
  <tbody id="tablebody">
    <tr id="tablerow">
      <td><input type="text" value="1" disabled/></td>
      <td><input type="text" /></td>
      <td><input  type="button" class="del first" value="Delete" /></td>
    </tr>
  </tbody>
</table>