Sunday, September 1, 2013

Delete all rows in HTML table

I have a HTML table which needs to be refreshed each time an Ajax post occurs, the table has ID: history.

$get("history").innerHTML = ""

If you don’t understand what is $get above, it is a shorthand for document.getElementById. Function $get is defined in Microsoft AJAX Library, see this for more info.


Code above works well in Firefox and Chrome, both of them accept that code happily to delete all rows in table, but if I run that code in Internet Explorer 8, a javascript exception will occur : “Unknown runtime error”.


IE8 cannot delete rows in HTML table by using innerHTML property, read this for detail info.


 


The solution for this issue is to delete manually all rows in a table using javascript loop, or if you use JQuery, you can make it simpler, you can call empty() method:

$("#history").empty()