Adding html edit button to each new row of table with JS

Question

I have a form that lets users add new rows to a table using 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;
}

I want to also add an edit button to each new row that is created, with a specified td class.

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

I tried declaring a var cell3 and putting cell3.innerHTML = "the code above" which did nothing. I also tried doing it with =+

Answer 1

I'd create a template cell, then clone it to add to each row with the chosen class or an empty cell if the row doesn't have the class (could also use colspan on the last cell in the row to widen those that don't get an edit button). Eg

 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

You can try something like this:

Define this function

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

Then call it like this:

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