1. Dynamically loading tables
1. First set the id for the added position of the table in html
That is, write a div tag inside the body tag of html to indicate that the table is to be added to the inside of this div. as follows
<div id="tdl"><div>
2. Write the statement to add the table in javascript
If it is in the current html file, it is written inside the <script> tag, such as
Copy the code code as follows:
<script type="text/javascript" >
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //The table added here can be created according to your own needs
</script>
If you import a js file, write the following statement directly in the js file (assuming it is test.js)
Copy the code code as follows:
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"
Then introduce your own html file
Copy the code code as follows:
<script type="text/javascript" src="test.js"></script>
2. Dynamically add table rows
1. First set the id for the adding position of the table row in HTML. This position must be inside <tbody> (not particularly accurate, but I got this conclusion based on my test. If you have other methods, please leave a message, thank you), as follows
Copy the code code as follows:
<table>
<thead></thead>
<tfoot><tfoot> //tfoot and thead are used together with tbody, but when I was writing, it was okay not to use them.
<tbody id="rows"></tbody>
</table>
[/s/S ]*/n
2. In the javascript content, you must first create rows and cells, and then add rows in <.tbody>, as follows
[code]
row=document.createElement("tr"); //Create row
td1=document.createElement("tr"); //Create cell
td1.appendChild(document.createTextNode("content")); //Add content to the cell
row.appendChild(td1); //Add cells to the row
document.getElementById("rows").append(row); //Add rows to <tbody>
3. My little discovery (maybe others already know it...)
1. I did a test myself, writing <table id="tdl'></table> in html and document.getElementById("tdl").innerHTML="<tr><td></td> in javascript </tr>", after writing this, test it, the rows of the table in the html will not be added.
2. After completing the above test, I changed it again to write <table><tr><td id="t'><td><tr></table> in html and document.getElementById("t in javascript ").innerHTML="<p>content</p>", the test can add content.
3. Thinking: What conclusions can be drawn from the above two tests? I haven’t figured out how to summarize it yet. What kind of tags can be added directly through innerHTML?