How to dynamically load tables and dynamically add table rows in javascript

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>&lt ;script type="text/javascript" > <br><br>document.getElementById("tbl").innerHTML="<table><tr><td></td></tr&gt ;</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:

 
 //tfoot and thead are used in conjunction with tbody, but when I was writing, it was okay not to use them. 

[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
2. After completing the above test, I changed the html to write

3. Thinking: What conclusions can be drawn from the above two tests, but I haven’t figured out how to summarize it yet. What kind of tags can be added directly through innerHTML?

Related labels：

动态加载表格动态添加表格行

source：php.cn

Previous article：asm.js usage sample code_basic knowledge Next article：Example code for jquery to implement dynamic menu_jquery

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

How to dynamically load tables and dynamically add table rows in javascript_javascript skills