JavaScript deleteTHead method

As we can create and delete Table footer in the html page with the use of JavaScript method similarly we can delete and create Table header with the use of JavaScript method deleteTHead() of the table object.

JavaScript deleteTHead method

JavaScript deleteTHead method

     

As we can create and delete Table footer in the html page with the use of JavaScript method similarly we can delete and create Table header with the use of JavaScript method deleteTHead() of the table object. In this example of JavaScript methods we have deleted the table header by getting the table object. Syntax of deleteTHead() is as follows:

Syntax:

 TableObject.deleteTHead();

Description of code:

As we have described in our example of deleting table footer that we must have table object for deleting the table footer therefore  here also we have taken the table object with the method document.getElementById() and then we have called the method deleteTHead() for deleting the table header.

Here is the full example html code for deleteTHeadExample.html as follows:

 <html>
<body>
<script language="JavaScript">
function deleteTableHeader() {
document.getElementById('table').deleteTHead();
}
</script>
<p align="center">&nbsp;</p>
<div style="background: #cf2255; width:'100%';" align="center">
  <font color="#ffffcc" size="12pt">
    <b>Deleting Table Header</b>
  </font>
</div>
  <center>
  <table id="table" border="1" width="400">
	<thead>
	  <th colspan="2">Information table Header </th>
	</thead>
        <tr>
	    <td>Name</td>
            <td>Deepak Kumar</td>
        </tr>
	<tr>
	    <td>Designation</td>
            <td>IT Manager</td>
        </tr>
  </table>
 </center>
	<p>
	 <center>
		 <input type="button" value="Delete header" 
           onclick="deleteTableHeader(); this.disabled='true';">
	</center>
	</p>
</body>
</html>

Output:

Click on the button "Delete header" to delete header of the table.

Download Source Code