Delete all rows in an HTML table

Question

How can I delete all rows of an HTML table except the  lt th gt  s using Javascript  and without looping through all the rows in the table  I have a very huge table and I don t want to freeze the UI while I m looping through the rows to delete them

User · Answer

Just Clear the table body       tblbody   html

User · Answer

How about this   When the page first loads  do this   var myTable   document getElementById  myTable    myTable oldHTML myTable innerHTML    Then when you want to clear the table   myTable innerHTML myTable oldHTML    The result will be your header row s  if that s all you started with  the performance is dramatically faster than looping

User · Answer

this would work iteration deletetion in HTML table in native  document querySelectorAll  table tbody tr   forEach function e  e remove

User · Answer

this will remove all the rows       table of items tr   remove

User · Answer

Keep the  lt th gt  row in a  lt thead gt  and the other rows in a  lt tbody gt  then replace the  lt tbody gt  with a new  empty one   i e   var new tbody   document createElement  tbody    populate with new rows new tbody   old tbody parentNode replaceChild new tbody  old tbody

User · Answer

Points to note  on the Watch out for common mistakes   If your start index is 0  or some index from begin   then  the correct code is   var tableHeaderRowCount   1  var table   document getElementById  WRITE YOUR HTML TABLE NAME HERE    var rowCount   table rows length  for  var i   tableHeaderRowCount  i  lt  rowCount  i          table deleteRow tableHeaderRowCount       NOTES  1  the argument for deleteRow is fixed this is required since as we delete a row  the number of rows decrease   i e  by the time i reaches  rows length - 1   or even before that row is already deleted  so you will have some error exception  or a silent one    2  the rowCount is taken before the for loop starts since as we delete the  table rows length  will keep on changing  so again you have some issue  that only odd or even rows only gets deleted    Hope that helps

User · Answer

If you have far fewer  lt th gt  rows than non- lt th gt  rows  you could collect all the  lt th gt  rows into a string  remove the entire table  and then write  lt table gt thstring lt  table gt  where the table used to be   EDIT  Where  obviously   thstring  is the html for all of the rows of  lt th gt s

User · Answer

the give below code works great  It removes all rows except header row  So this code really t       Your Table tr gt td   remove

User · Answer

const table   document querySelector  table    table innerHTML           null   table innerHTML        the above javascript worked fine for me  It checks to see if the table contains any data and then clears everything including the header

User · Answer

If you can declare an ID for tbody you can simply run this function   var node   document getElementById  tablebody    while  node hasChildNodes        node removeChild node lastChild

User · Answer

I needed to delete all rows except the first and solution posted by  strat but that resulted in uncaught exception  referencing Node in context where it does not exist   The following worked for me    var myTable   document getElementById  myTable    var rowCount   myTable rows length  for  var x rowCount-1  x gt 0  x--       myTable deleteRow x

User · Answer

If you do not want to remove th and just want to remove the rows inside  this is working perfectly   var tb   document getElementById  tableId      while tb rows length  gt  1      tb deleteRow 1

User · Answer

Assuming you have just one table so you can reference it with just the type  If you don t want to delete the headers      tbody   children   remove     otherwise      table   children   remove     hope it helps

User · Answer

this is a simple code I just wrote to solve this  without removing the header row  first one    var Tbl   document getElementById  tblId    while Tbl childNodes length gt 2  Tbl removeChild Tbl lastChild      Hope it works for you

User · Answer

Very crude  but this also works   var Table   document getElementById  mytable    Table innerHTML

User · Answer

Assign an id or a class for your tbody    document querySelector   tbodyId   remove    document querySelectorAll   tbodyClass   remove      You can name your id or class how you want  not necessarily  tbodyId or  tbodyClass

User · Answer

This is an old question  however I recently had a similar issue  I wrote this code to solve it   var elmtTable   document getElementById  TABLE ID HERE    var tableRows   elmtTable getElementsByTagName  tr    var rowCount   tableRows length   for  var x rowCount-1  x gt 0  x--       elmtTable removeChild tableRows x        That will remove all rows  except the first     Cheers

User · Answer

Assing some id to tbody tag  i e    After this  the following line should retain the table header footer and remove all the rows    document getElementById  yourID   innerHTML       And  if you want the entire table  header rows footer  to wipe out  then set the id at table level i e

User · Answer

This works in IE without even having to declare a var for the table and will delete all rows   for var i   0  i  lt  resultsTable rows length           resultsTable deleteRow i

[javascript] Delete all rows in an HTML table

Examples related to javascript

Examples related to html

Examples related to html-table