How to create Header of a table in JavaScript

In this article I have described about table createTHead() method used in JavaScript.
  • 3806

Table createTHead() method in JavaScript

  • As we know that a table object represents a table in HTML.
  • If want to create the Header and delete that Header from table then we can use table createTHead() method.

Browser support

Following are the main browsers which support the table createTHead() method

  • Internet Explorer.
  • Firefox.
  • Opera.
  • Google Chrome.
  • Safari.

Syntax

The syntax of table createTHead() method as follows

tableObject.createTHead()

Lets take an example

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

    function createTHead() {

        var x = document.getElementById("Table");

        if (!x.tHead) {

            var header = x.createTHead();

            var row = header.insertRow(0);

            var cell = row.insertCell(0);

            cell.innerHTML = "<b>WELCOME TO TABLE HEADER</b>";

        }

    }

    function deleteTHead() {

        document.getElementById("Table").deleteTHead();

    }

</script>

</head>

<body style ="background-color:GREEN">

<table id="Table" border="1">

  <tr>

    <td>DELHI</td>

    <td>NOIDA</td>

  </tr>

  <tr>

    <td>JAIPUR</td>

    <td>NAINITAL</td>

  </tr>

  <tr>

    <td>RANCHI</td>

    <td>KOLKATA</td>

  </tr>

</table>

<br />

<button type="button" onclick="createTHead()">CREATE TABLE HEAD</button>

<button type="button" onclick="deleteTHead()">DELETE TABLE HEAD</button>

</body>

</html>

 

Output


HEAD1.jpg


when we click on Crete head button


HEAD2.jpg


When we click on delete button the recently created header will be disappear.

 

Further Readings

You may also want to read these related articles :here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

Categories

More Articles

© 2013 dotNetheaven. All rights reserved.