Incorporating a dynamic HTML editing button to every new row in a table using JavaScript

Question

Incorporating a dynamic HTML editing button to every new row in a table using JavaScript

My application features a form that allows users to dynamically add new rows to a table using JavaScript:

// Function to add 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;

}

In addition to adding new rows, I am trying to include an edit button in each newly created row with a specified "td" class.

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

I attempted to declare a variable called cell3 and insert the button code into it using cell3.innerHTML, but this did not work. Additionally, I tried concatenating the strings with += but encountered similar issues.

javascript

Answer 1

Answer №1

To streamline the process, I would set up a template cell and then duplicate it for each row that requires the specified class. For rows without the class, an empty cell can be added instead (alternatively, the last cell in the row could have its colspan expanded to accommodate those without an edit button). Here's an example:

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

To streamline the process, I would set up a template cell and then duplicate it for each row that requires the specified class. For rows without the class, an empty cell can be added instead (alternatively, the last cell in the row could have its colspan expanded to accommodate those without an edit button). Here's an example:

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 3

Answer №2

If you're looking to achieve a similar result, you might consider the following approach:

Start by defining the following function:

let createFragment = function (htmlString) {
  return document.createRange().createContextualFragment(htmlString);
}

After that, make use of it in the following manner:

if (title.textContent === "Create Account"){
          let table = document.getElementById(tableId);
          let row = table.insertRow(0);
          let cell1 = row.insertCell(0);
          let cell2 = row.insertCell(1);
          let cell3 = row.insertCell(2);
  cell1.innerHTML = document.getElementById("modalType").value;
  cell2.innerHTML = document.getElementById("modalPrice").value;
  let buttonHtml = '<td class="editButton"><button class="editAccount" data-modal-target="#modal" id="editAccounts" onclick="executeEdit()">✎</button></td>'
  cell3.appendChild(createFragment(buttonHtml));
}

Answer 4

If you're looking to achieve a similar result, you might consider the following approach:

Start by defining the following function:

let createFragment = function (htmlString) {
  return document.createRange().createContextualFragment(htmlString);
}

After that, make use of it in the following manner:

if (title.textContent === "Create Account"){
          let table = document.getElementById(tableId);
          let row = table.insertRow(0);
          let cell1 = row.insertCell(0);
          let cell2 = row.insertCell(1);
          let cell3 = row.insertCell(2);
  cell1.innerHTML = document.getElementById("modalType").value;
  cell2.innerHTML = document.getElementById("modalPrice").value;
  let buttonHtml = '<td class="editButton"><button class="editAccount" data-modal-target="#modal" id="editAccounts" onclick="executeEdit()">✎</button></td>'
  cell3.appendChild(createFragment(buttonHtml));
}

Incorporating a dynamic HTML editing button to every new row in a table using JavaScript

Answer №1

Answer №2

Similar questions

Could you explain the contrast among "yarn serve," "yarn start," and "yarn build"?

What is the best way in Javascript to retrieve and process multiple stream chunks from a single API request using the fetch() method

Refresh the HTML content within a specified div element

Utilize HTML, AJAX, and JavaScript to retrieve the location of the current user and display markers for other users on a

Node.js scheduler library for triggering events based on time in a cron-like fashion

Creating a curved exponential data set with specific endpoints and a set number of data points

The Challenge of Iterating Through an Array of Objects in Angular Components using TypeScript

tips for setting the value of a checkbox to true in React Material-UI with the help of React Hooks

Strategies for integrating a username-only login using Firebase without requiring a password or email address

Issue with multi-level bootstrap navbar: Unable to hover on child elements

What is the best way to display an image along with a description using Firebase and next.js?

Utilizing a Buefy element without Vue.js integration

Activate a spinner when a button is clicked within a row of an antd table

Is it possible to verify whether a function contains a call to another function within it?

How about representing a two-dimensional array in a point-free manner?

Reveal or Conceal Information Depending on Cookie Status

Instructions on inserting a new row beneath a selected row using jQuery

Navigate to a PDF file from an HTML5 application using PhoneGap by accessing an external link

Fixing TypeError in React App: How to Resolve the "Cannot read property 'prototype' of undefined" Issue

renewing a div element without the need to reload the entire webpage