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
<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


If by introducing a js file, write the following statement directly in the js file (assuming test.js)

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

<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> 

[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  
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?

Related articles: