使用JS将html编辑按钮添加到表格的每个新行

Question

我有一个表单，允许用户使用 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" 什么也没做。 我也试过用 =+

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

Answer 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));
}