How can I edit table row using JavaScript querySelector()?

Question

I am trying to edit data from a table. When the edit button is pressed it will bring up an input field to edit the new value in the selected row, I tried using the code below, but nothing changes when I press the edit button.

Here is my code:

const editRow = (index = "x") => {
  const tdTable = document.querySelectorAll("table > tbody > tr");

  const newRow = `
    <tr>
      <td>
        <input type="text" name="name" />
      </td>
      <td>
        <input type="text" name="umur" />
      </td>
      <td>
        <input type="text" name="address" />
      </td>
      <td colspan = 2>
        <span class="btn btn-info" onClick="saveData()">Save</span>
      </td>
    </tr>`;

  tdTable.innerHTML = newRow;
};

Here is what the table looks like in the browser when I press the edit button.

Answer 1

You need to do something to actually put the input values back into the original <td> s. Below I prepared an MCVE (minimal complete and viable example), showing how it can be done:

 const tb=document.querySelector("tbody"), edidel="<button>Edit</button> <button>Delete</button>"; // prepare the page first (fill in some sample data): tb.innerHTML= [[1,"jansen",35,"medan"], [2,"Alfa",31,"jakarta"], [3,"joko",10,"solo"], [4,"eko cahyonto",20,"NTB"]].map(r=> "<tr><td>"+r.join("</td><td>")+"</td><td>"+edidel+"</td></tr>" ).join("\\n"); tb.onclick=ev=>{ [...ev.target.closest("tr").children].forEach((td,i)=>{ const btn=ev.target.textContent; if (btn==="Edit") td.innerHTML=i<4?'<input type="text" value="'+td.textContent+'" data-orig="'+td.textContent+'">' :'<button>Save</button> <button>Cancel</button>'; else if (["Save","Cancel"].includes(btn)) td.innerHTML=i<4?(btn==="Save"?td.children[0].value:td.children[0].dataset.orig) :edidel; }) }

 input {width:50px}

 <table> <thead><tr><th>No</th><th>Nama</th><th>Umur</th><th>Alamat</th><th>CRUD</th></thead> <tbody></tbody> </table>

The first 7 lines of code simply prepare a small table on which we can work. The actual script then starts with a "delegated click event attachment" on the first <tbody> element of the page (which happens to be our test table). This means, we can add or remove table records and don't have to worry about attaching events to the newly created buton elements any more.

An action will only happen, if the clicked element has an ´.textContent` of either "Edit", "Save" or "Cancel" (an action for the "Delete" button has not yet been defined but can easily be added).

Depending on the actual clicked button some action on the <TD> elements directly before the button will be performed:

• when going into "Edit"-mode the td.textContent of each <td> is copied into a newly created <input type="text"> element and is also save in its data-orig attribute, in case we want to click on "Cancel" later on.
• "Save" will copy the .value of each <td> s first child (the <input> element) back to its parent td.innerHTML attribute.
• in case "Cancel" was clicked, the <input> 's .dataset.orig value is put back into the td.innerHTML attribute.

Answer 2

JavaScript is a case-sensitive language.

try fixing the uppercase onClick to onclick, as the example : <button onclick="myFunction()">Click me</button>