How to create Footer of a table in JavaScript

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

Table createTfoot() method in JavaScript

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

Browser support

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

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

Syntax

The syntax of table createTFoot() method as follows

tableObject.createTFoot()

Lets take an example

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

    function createTFoot()

    {

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

        if (!x.tFoot)

        {

            var footer = x.createTFoot();

            var row = footer.insertRow(0);

            var cell = row.insertCell(0);

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

        }

    }

    function deleteTFoot()

    {

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

    }

</script>

</head>

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

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

  <tr>

    <td>AMAN</td>

    <td>ATUL</td>

  </tr>

  <tr>

    <td>VIJAY</td>

    <td>VIPIN</td>

  </tr>

</table>

<br />

<button type="button" onclick="createTFoot()">CREATE TABLEFOOT</button>

<button type="button" onclick="deleteTFoot()">DELETE TABLEFOOT</button>

</body>

</html>

 

Output

FTR1.jpg

 

when we click on button


FTR2.jpg


when we click on delete button then recently footer will be delete.

 

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

© 2020 DotNetHeaven. All rights reserved.