How to Create Dynamic Tables in Java Script
Tables are formatted objects located on your Web pages that allow you to lay out lists of data. The table formats the data that is shown to the user, so it creates a nicer layout for the Web page. You can create these tables using the JavaScript language. The JavaScript language adds a method for dynamically adding tables to your page. These tables change when the user accesses different data or uses a different link to navigate to the page.
Other People Are Reading
Instructions
-
-
1
Create the JavaScript block. The JavaScript block is set in the "<head>" and "</head>" tags of your HTML code. Place the following code in your HTML file:
<script type="text/javascript"> </script>
-
2
Create the start and end tags. These tags are string variables that contain the HTML code for your tables. The following code creates a start and end JavaScript variable:
startTag="<TABLE id='table1'>"
endTag="</TBODY></TABLE>" -
-
3
Create your table rows. The HTML code for a table row is the "<tr>" tag. Within the "<tr>" tag is the "<td>" tag which denotes a table cell. The following code creates a variable that contains two rows:
tableRows = "<tr><td>My first row</td></tr>"
tableRows = tableRows + "<tr><td>My second row</td></tr>" -
4
Add your table to a "<div>" tag in your HTML code. This can be any div tag in your page. In this example, the new dynamic table is displayed in the "myTable" div. The following code shows you how to add a dynamic table to your page:
myTable.innerHTML = startTag + tableRows + endTag
The "innerHTML" method allows you to add any HTML code dynamically to your page.
-
1
References
- Photo Credit Ciaran Griffin/Lifesize/Getty Images
