How does javascript dynamically load tables and dynamically add table rows
- 2020-03-30 00:03:45
- OfStack
One, dynamic loading table
1. First set the id for the table's add location in HTML
I'm just going to put a div tag inside the body tag of the HTML that says that the table is going to be added inside that div. The following
< Div id = "TDL >" < Div>
2. Write the add table statement in javascript
If in the current HTML file, write in < Script> Label interior, such as
If by introducing a js file, write the following statement directly in the js file (assuming test.js)
Then introduce your own HTML file
Add table rows dynamically
1. First, set the id in HTML to add the position of the table row, which must be < Tbody> Internal (not particularly accurate, but according to my test on this conclusion, there are other ways please leave a message, thank you), as follows
Three, my little discovery (maybe others already know...)
1. I did a test by myself. The table id = "TDL > < / table> Document.getelementbyid (" TDL ").innerhtml ="< Tr> < Td> < / td> < / tr>" , so that the lines of the table in the HTML are not added.
2. After the above test, I changed the HTML again to say < Table> < Tr> < Td id = "t '> < Td> < Tr> < / table> Document.getelementbyid ("t").innerhtml ="< P> Content< / p>" , the test can add content.
3. Thinking: what conclusions might be drawn from the above two tests?
1. First set the id for the table's add location in HTML
I'm just going to put a div tag inside the body tag of the HTML that says that the table is going to be added inside that div. The following
< Div id = "TDL >" < Div>
2. Write the add table statement in javascript
If in the current HTML file, write in < Script> Label interior, such as
<script type="text/javascript" >
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //The tables added here can be created to suit your needs
</script>
If by introducing a js file, write the following statement directly in the js file (assuming test.js)
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"
Then introduce your own HTML file
<script type="text/javascript" src="test.js"></script>
Add table rows dynamically
1. First, set the id in HTML to add the position of the table row, which must be < Tbody> Internal (not particularly accurate, but according to my test on this conclusion, there are other ways please leave a message, thank you), as follows
<table>
<thead></thead>
<tfoot><tfoot> //Tfoot and thead are used in conjunction with the tbody, but when I'm writing them, I don't have to use them.
<tbody id="rows"></tbody>
</table>
[sS ]*n
2. in javascript In the content, you create the rows and cells first, and then in the <.tbody> Add the line as follows
[code]
row=document.createElement("tr"); //Create a line
td1=document.createElement("tr"); //Create cell
td1.appendChild(document.createTextNode("content")); //Add content to the cell
row.appendChild(td1); //Adds a cell to a row
document.getElementById("rows").append(row); //Add rows to <Tbody> In the
Three, my little discovery (maybe others already know...)
1. I did a test by myself. The table id = "TDL > < / table> Document.getelementbyid (" TDL ").innerhtml ="< Tr> < Td> < / td> < / tr>" , so that the lines of the table in the HTML are not added.
2. After the above test, I changed the HTML again to say < Table> < Tr> < Td id = "t '> < Td> < Tr> < / table> Document.getelementbyid ("t").innerhtml ="< P> Content< / p>" , the test can add content.
3. Thinking: what conclusions might be drawn from the above two tests?