Home >Web Front-end >JS Tutorial >How to dynamically load tables and dynamically add table rows in javascript_javascript skills
How to dynamically load tables and dynamically add table rows in javascript_javascript skills
- WBOYOriginal
- 2016-05-16 17:12:101845browse
1. Dynamically load the table
1. First set the id for the adding position of the table in html
That is, write a div tag inside the body tag of html to indicate the table To be added inside this div. As follows
2. Write the statement to add the table in javascript
If it is in the current html file, Then write it inside the <script> tag, such as <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="74836" class="copybut" id="copybut74836" onclick="doCopy('code74836')"><u> Copy the code </u></a></span> The code is as follows: </div> <div class="codebody" id="code74836"> <br>< ;script type="text/javascript" > <br><br>document.getElementById("tbl").innerHTML="<table><tr><td></td></tr> ;</table>" //The table added here can be created according to your own needs <br><br></script>
If the js file is introduced, then in the js file ( Assume it is test.js) and directly write the following statement
document .getElementById("tbl").innerHTML="
"
Then again Introduce your own html file
2. Dynamically add table rows
1. First in html Set the id for the adding position of the table row. This position must be inside (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
[sS ]*n
2. In the javascript content, To create rows and cells first, then add rows in <.tbody>, as follows
[code]
row=document.createElement("tr"); //Create rows
td1=document.createElement("tr"); //Create cell
td1.appendChild(document.createTextNode("content")); //Add content to cell
row .appendChild(td1); //Add cells to the row
document.getElementById("rows").append(row); //Add rows to
3. My little discovery (maybe others have known it already...)
1. I did a test myself, writing
1. First set the id for the adding position of the table in html
That is, write a div tag inside the body tag of html to indicate the table To be added inside this div. As follows
2. Write the statement to add the table in javascript
If it is in the current html file, Then write it inside the <script> tag, such as <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="74836" class="copybut" id="copybut74836" onclick="doCopy('code74836')"><u> Copy the code </u></a></span> The code is as follows: </div> <div class="codebody" id="code74836"> <br>< ;script type="text/javascript" > <br><br>document.getElementById("tbl").innerHTML="<table><tr><td></td></tr> ;</table>" //The table added here can be created according to your own needs <br><br></script>
If the js file is introduced, then in the js file ( Assume it is test.js) and directly write the following statement
Copy the code The code is as follows:
document .getElementById("tbl").innerHTML="
Then again Introduce your own html file
Copy code The code is as follows:
2. Dynamically add table rows
1. First in html Set the id for the adding position of the table row. This position must be inside (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 code The code is as follows:
[sS ]*n
2. In the javascript content, To create rows and cells first, then add rows in <.tbody>, as follows
[code]
row=document.createElement("tr"); //Create rows
td1=document.createElement("tr"); //Create cell
td1.appendChild(document.createTextNode("content")); //Add content to cell
row .appendChild(td1); //Add cells to the row
document.getElementById("rows").append(row); //Add rows to
3. My little discovery (maybe others have known it already...)
1. I did a test myself, writing