Wednesday, 25 July 2012

How to create dynamic tables in HTML using javascript at runtime?

In this tutorial, you will come to know how to create dynamic tables in HTML. There are some situations when you don't know the contents of the table at design time while creating the table. In this condition, you want to load and fill the table at run time. Here in this code we will write javascript code to create the table at runtime.

Code Snippet

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">
function CreateTable()
{
    var tablecontents = "";
    tablecontents = "<table>";
    for (var i = 0; i < 5; i ++)
   {
      tablecontents += "<tr>";
      tablecontents += "<td>" + i + "</td>";
      tablecontents += "<td>" + i * 100 + "</td>";
      tablecontents += "<td>" + i * 1000 + "</td>";
      tablecontents += "</tr>";
   }
   tablecontents += "</table>";
   document.getElementById("tablespace").innerHTML = tablecontents;
}
</script>

</head>

<body onload="CreateTable()">
<h1>My First Web Page</h1>
<p id="tablespace"></p>
</body>
</html>


Explanation: Here in this code snippet, in the body of the html page, there is a <p> tag in which we want to place a table at runtime. So, we are calling a javascript function 'CreateTable' on the load of page. It will create table at runtine and will change the innerHTML of <p> tag at runtime.

6 comments:

  1. very useful things i get from this blog thank s....

    ReplyDelete
  2. The injection process works by prematurely terminating a text string and appending a new command. Because the inserted command may have additional strings appended to it before it is executed, the malefactor terminates the injected string with a comment mark "--". Subsequent text is ignored at execution time.
    term papers

    ReplyDelete
  3. i did same thing previously but was not working properly on IE

    I will run this code again and let you know.
    createElement should work properly

    Manu
    www.kidsmitra.com

    ReplyDelete
  4. simple and super code thanks dude.......

    ReplyDelete
  5. http://www.coachoutletstoreinc.com/ Coach Outlet Store Online
    http://www.michaelkorsoutletmkinc.com/ Michael Kors Outlet
    http://www.coachfactoryoutletwebsite.com/ Coach Factory Outlet
    http://www.tomsusashoes.com/ Toms Shoes
    http://www.cheapjerseysinc.com/ Cheap Jerseys
    http://www.michaelkors-bedford.com/ Michael Kors
    http://www.coachoutlet-sale.com/ Coach Outlet
    http://www.coachfactoryoutletorg.com/ Coach Factory Outlet
    http://www.coachoutlet-buy.com/ Coach Outlet
    http://www.coachhandbagsonlineoutlet.com/ Coach Handbags
    http://www.giuseppezanottionline.com/ Giuseppe Zanotti
    http://www.coachfactoryoutlet-handbags.com/
    http://www.coach-factory-outlet-online.com/ Coach Factory Outlet Online
    http://www.coachstoreonline.com/ Coach Outet Store Online
    http://www.coachfactoryoutlets2014.com/ Coach Factory Outlet
    http://www.michaelkorsoutletonlinemk.com/ Michael Kors Outlet Online
    http://www.celineoutlet-online.com/ Celine Outlet
    http://www.michaelkors.name/ Michael Kors
    http://www.michael-kors-outlet-store.com/ Michael Kors Store
    http://www.tomsshoescompany.com/ Tomss Hoes
    http://www.pradaoutlet-store.com/ Prada Outlet
    http://www.fitflopfootwear.com/ Fitflop Footwear
    http://www.celinebags-outlet.com/ Celine Bags
    http://www.fitflopsflipflops.com/ Fitflops Flipflops
    http://www.fitflopusaonline.com/ Fitflops
    http://www.giuseppezanottidesigner.com/ Giuseppe Zanotti Designer
    http://www.fitflopflip-flop.com/ Fitflops
    http://www.giuseppezanottisneakersmen.com/ Giuseppe Zanotti Sneakersmen
    http://www.fitflopsandalssale.com/ Fitflops

    ReplyDelete