使用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));
}