One, dynamic loading table
1. Set the ID first in HTML for the add position of the table
Which is to write a DIV tag inside the HTML body tag to indicate that the table is to be added to the inside of this div. As follows
<div id= "TDL" ><div>
2. Write a statement to add a table in JavaScript
In the current HTML file, it is written inside the <script> tag, as
Copy Code code as follows:
<script type= "Text/javascript" >
document.getElementById ("TBL"). Innerhtml= "<table><tr><td></td></tr></table > "//The form added here can be created according to your needs
</script>
If through the introduction of JS file, in the JS file (assuming that is test.js) directly write the following statement
Copy Code code as follows:
document.getElementById ("TBL"). Innerhtml= "<table><tr><td></td></tr></table > "
And then introduce your own HTML file.
Copy Code code as follows:
<script type= "Text/javascript" src= "Test.js" ></script>
second, dynamically add table rows
1. First set the ID for the add position of the table row in HTML, this location must be <tbody> internal (not particularly accurate, but according to my test to get this conclusion, there are other methods please leave a message, thank you), as follows
Copy Code code as follows:
<table>
<thead></thead>
<tfoot><tfoot>//tfoot and Thead are compatible with tbody, but when I write, it is useless.
<tbody id= "Rows" ></tbody>
</table>
[\s\s]*\n
2. In JavaScript content, first create rows and cells, and then add rows to <.tbody>, as follows
[Code]
Row=document.createelement ("tr"); Create a row
Td1=document.createelement ("tr"); Create cells
Td1.appendchild (document.createTextNode ("content")); Add content to a cell
Row.appendchild (TD1); Add a cell to a row
document.getElementById ("Rows"). Append (row); Add Rows to <tbody>
Third, my small discovery (perhaps others already knew 、、、)
1. I did a test myself, writing in HTML <table id= "TDL" ></table>,javascript write document.getElementById ("TDL"). Innerhtml= " <tr><td></td></tr>, which is written and tested, and the rows of table in HTML are not added.
2. After the above test, I changed the HTML to write <table><tr><td id= "T ' ><td><tr></table> Write document.getElementById ("T") in JavaScript. innerhtml= "<p>content</p>", the test can add content.
3. Thinking: From the above two tests seem to be able to draw some conclusions, how to sum up has not thought well, which label can directly through the innerHTML directly add it?
