Home Javascript JavaScript createTFoot method
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

JavaScript createTFoot method

Advertisement
We can add header and footer also to the table by using the JavaScript in a similar manner as we have added and deleted the caption to the specified table.

JavaScript createTFoot method

     

We can add header and footer also to the table by using the JavaScript in a similar manner as we have added and deleted the caption to the specified table. Syntax for using the createTFoot() method is as described below :

Syntax:

TableObject.createTFoot();

Description of code:

In the following example code we have created a table with the id "table" and we also have one button "Create foot" which calls the JavaScript function createTableFooter(). In the function createTableFooter() we have taken the table object by its id using the method getElementById() and with this object we can create table footer.

   document.getElementById('table') .createTFoot();

We can also add some style and color to this table footer. Here is the full example code for createTFootExample.html as given below:

createTFootExample.html

<html>
<body>
<script language="JavaScript">
function createTableFooter() {
	var footer = document.getElementById('table')
        .createTFoot();
	 footer.bgColor = '#565656';
	}
</script>
<p align="center">&nbsp;</p>
<div style="background: #cf2255; width:'100%';" align="center">
  <font color="#ffffcc" size="12pt">
   <b>Creating Table Footer</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>
	<tfoot>
		<th colspan="2"> 
			<font color="#ffffcc" size="5pt">
				Information table Footer 
			</font>
		</th>
	</tfoot>
  </table>
 </center>
<p>
  <center>
  <input type="button" 
         value="Create foot" 
         onclick="createTableFooter(); this.disabled='true'">
 </center>
</p>
</body>
</html>
 

Output:

When you will click on the button "Create foot", it will create the footer for specified table.

Download Source Code

     

Advertisements

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: January 29, 2009

Ask Questions?    Discuss: JavaScript createTFoot method  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com