使用JS将html编辑按钮添加到表格的每一行答案

【问题标题】：Adding html edit button to each new row of table with JS使用JS将html编辑按钮添加到表格的每一行
【发布时间】：2020-10-02 22:51:35
【问题描述】：

我有一个表单可以让用户使用 JS 向表中添加新行：

       //adds a new account row
        if (tit.innerHTML === "Add Account"){
          var table = document.getElementById(tableId);
          var row = table.insertRow(0);
          var cell1 = row.insertCell(0);
          var cell2 = row.insertCell(1);
      
  cell1.innerHTML = document.getElementById("modal_type").value;
  cell2.innerHTML = document.getElementById("modal_price").value;
}

我还想为创建的每个新行添加一个编辑按钮，并指定 td 类。

<td class=edtbutton><button class="edit_account" data-modal-target="#modal" id="editaccounts" onclick="sayedit()">✎</button></td>

我尝试声明一个 var cell3 并将 cell3.innerHTML = "the code above" 什么也没做。我也试过用 =+

【问题讨论】：

标签： javascript

【解决方案1】：

我会创建一个模板单元格，然后克隆它以添加到具有所选类的每一行，或者如果该行没有该类，则添加一个空单元格（也可以在该行的最后一个单元格上使用 colspan 来扩大那些没有编辑按钮的人）。例如

function addButtons() {
  let cell = document.createElement('td');
  cell.classList.add('edtbutton');
  cell.innerHTML = '<button class="edit_account" data-modal-target="#modal" id="editaccounts" onclick="sayedit()">✎</button>';
  document.querySelectorAll('#t0 tr').forEach(row => {
    if (row.classList.contains('editableRow')) {
      row.appendChild(cell.cloneNode(true));
    } else {
      row.appendChild(document.createElement('td'));
    }
  });
}

function sayedit(){
  console.log('edit me…');
}

table {
  border-collapse: collapse;
  border-left: 1px solid #bbbbbb;
  border-top: 1px solid #bbbbbb;
}
tr.editableRow {
  background-color: #dddddd;
}
td {
  border-right: 1px solid #bbbbbb;
  border-bottom: 1px solid #bbbbbb;
}

<table id="t0">
  <tr><td>not editable
  <tr class="editableRow"><td>cell
  <tr class="editableRow"><td>cell
  <tr class="editableRow"><td>cell
</table>

<button onclick="addButtons()">Add buttons</button>

【讨论】：

我将对其进行更多测试，看看是否可以让它工作。一个问题是 tr 是通过表单输入添加的，并且没有 tr 类。同样为简单起见，我希望按钮始终存在。（我更喜欢使用单独的函数显示/隐藏它们。）

【解决方案2】：

你可以试试这样的：

定义这个函数

let fragmentFromString = function (strHTML) {
  return document.createRange().createContextualFragment(strHTML);
}

然后这样称呼它：

if (tit.innerHTML === "Add Account"){
          var table = document.getElementById(tableId);
          var row = table.insertRow(0);
          var cell1 = row.insertCell(0);
          var cell2 = row.insertCell(1);
          var cell3 = row.insertCell(2);
  cell1.innerHTML = document.getElementById("modal_type").value;
  cell2.innerHTML = document.getElementById("modal_price").value;
  let button = '<td class=edtbutton><button class="edit_account" data-modal-target="#modal" id="editaccounts" onclick="sayedit()">✎</button></td>'
  cell3.appendChild(fragmentFromString(button));
}

【讨论】：

我玩了一下它，但遗憾的是无法让它工作。我将第一个代码 sn-p 放在函数之外，并添加了您在第二个 sn-p 中提到的内容。