How to insert row in table through Javascript function

Question

I am trying to insert another row into a table with footer.

Here is my code:

function submit(){
        /* Some code here with declarations & value assignings*/

        let tble = document.getElementById("tabl");
        
        let newEl = document.createElement("tr");
        newEl.innerHTML="<td>"+nowSr+"</td> <td>"+taskForm+"</td> <td>"+tagForm+"</td> <td>Rs. "+amountForm+"</td>";

        tble.appendChild(newEl, tble.lastElementChild.previousSibling.lastElementChild);
       }

My function gives me below result:

As you can see (IN INSPECT ELEMENTS WINDOW) the new row is inserted after the footer. How to add it properly

after the last row in the table?

Does this answer your question? How to insert a row in an HTML table body in JavaScript — Anindya Dey
– Anindya Dey, Commented Apr 22, 2022 at 11:55

FZs · Accepted Answer · 2022-04-22 12:13:45Z

2

Don't insert the element directly to the <table> element, but select the <tbody> instead.

You can do that like that:

function submit(){
  let tble = document.getElementById("tabl");
        
  let newEl = document.createElement("tr");
  newEl.innerHTML="<td>"+nowSr+"</td> <td>"+taskForm+"</td> <td>"+tagForm+"</td> <td>Rs. "+amountForm+"</td>";

  tble.querySelector('tbody').appendChild(newEl, tble.lastElementChild.previousSibling.lastElementChild);
}

But you shouldn't use innerHTML to create the row (it could create an XSS vulnerability), use innerText or textContent instead. But that means that you have to create the <td>s differently:

function submit(){
  let tble = document.getElementById("tabl");
        
  let newEl = document.createElement("tr");
  appendTD(newEl, nowSr);
  appendTD(newEl, taskForm);
  appendTD(newEl, tagForm);
  appendTD(newEl, "Rs. "+amountForm);

  tble.querySelector('tbody').appendChild(newEl, tble.lastElementChild.previousSibling.lastElementChild);
}

function appendTD(tr, text){
  const td = document.createElement('td')
  td.innerText = text
  tr.appendChild(td)
}

edited Apr 22, 2022 at 12:13

answered Apr 22, 2022 at 12:00

FZs

18.8k13 gold badges47 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

abhimanyu Over a year ago

Thanks, It Solves it! :)

RenaudC5 · Accepted Answer · 2022-04-22 12:01:12Z

1

Try puhsing to the tbody intead of the table directly

function addTableRow(){
  const tbody = document.querySelector('#myTable tbody')
  
  const newRow = document.createElement('tr')
  newRow.innerHTML = `<td>Foo</td><td>Bar</td>`
  tbody.appendChild(newRow)
}

<table id="myTable">
  <thead>
    <tr>
      <th>Helo</th>
      <th>World</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Foo</td>
      <td>bar</td>
    </tr>
  </tbody>
</table>

<button onclick="addTableRow()">Add row</button>

answered Apr 22, 2022 at 12:01

RenaudC5

3,8591 gold badge13 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to insert row in table through Javascript function

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related