js dynamically create and delete tables sample code_javascript skills

Generate a 2000*5 table. The content of each cell is the row number and comma column number

Method 1: Use createElement to generate the table, use the insertRow and insertCell methods to generate rows and columns, and use the innerHTML attribute for the cell content. filling.
Method 2: Use createElement to generate a table, use the CreateElement method to generate rows and columns, and use the createTextNode method to fill the cell content.
Method 3: Splice the strings of the innerHTML attribute of the table, and use the string = operator to link the strings
Method 4: Splice the strings of the innerHTML attribute of the table, append each string to the array, and finally call the join method of the array Generate target string.

Running time comparison:
Method running time (ms)
Method one 93037
Method two 3341
Method three 2795
Method four 500

Specific The program is as follows:

Copy code The code is as follows:

< ;head>

<script> <br>showFunctionRunTime(createTable); <br>showFunctionRunTime(createTable2); <br>showFunctionRunTime(createTable3); <br>showFunctionRunTime(createTable4); <br></ script> <br></body> <br></html> <br> </div> <br>1. insertRow() and insertCell() functions <br> The insertRow() function can take parameters, in the following form: <br> insertRow(index) <br> This function adds a new row before the row of index. For example, insertRow(0) adds a new row before the first row. The default insertRow() function is equivalent to insertRow(-1), which adds a new row to the end of the table. <br> The usage of insertCell() and insertRow are the same. <br> 2. Dynamically set properties and events <br> The above innerHTML and innerText are both column properties. <br> innerText is the text added between <tb></tb>, innerHTML is the HTML code added between <tb></tb> <br> Set other attributes in the same way , for example, set the row background color <br> tr.bgColor = 'red'; <br>Set the colspan attribute <br>td.colSpan = 3; <br> <br> The same goes for setting events, which needs a brief explanation. <br> For example, I want to execute a self-defined function newClick when clicking on a new row. The newClick function is as follows: <br> function newClick(){ <br> alert("This is a newly added row"); <br>　｝ <br>　The code to set this function for the onclick event is as follows: <br>　tr.onclick = newClick; <br>　What needs to be done here is that the part after = must be a function name and cannot be in quotes, <br> newTr.onclick = newClick(); <br> newTr.onclick = 'newClick'; <br> newTr.onclick = "newClick"; <br> The above writing is wrong. <br> The following writing is also correct<br> newTr.onclick = function newClick(){ <br> alert("This is a newly added row"); <br>} <br>Dynamic deletion of the table<br> Method 1: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="53000" class="copybut" id="copybut53000" onclick="doCopy('code53000')"><u>Copy code </u></a></span> The code is as follows: </div> <div class="codebody" id="code53000"> <br><table id=mxh border=1&gt ; <BR><tr> <br><td>Row 1</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">Delete this row</ td> <br></tr> <br><tr> <br><td>Line 2</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex) ">Delete this row</td> <br></tr> <br></table> <br><script> <br>function deleteRow (tableID, rowIndex) { <br>var table =document.all[tableID] <br>table.deleteRow(rowIndex); <br>} <br>function getRowNum(tableID){ <br>var tab = document.all[tableID] <br>//Number of table rows <br>var rows = tab.rows.length; <br>//Number of table columns<br>var cells = tab.rows.item(0).cells.length; <br>} <br></script&gt ; <BR></div> <BR>Method 2: <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="30974" class="copybut" id="copybut30974" onclick="doCopy('code30974')"><U>Copy code </U></a></span> The code is as follows: </div><div class="codebody" id="code30974"> <BR><table id=mxh border=1> <br><tr> <br><td>Row 1</td><td onclick="deleteRow(this.parentElement)">Delete this Row</td> <br></tr> <br><tr> <br><td>Line 2</td><td onclick="deleteRow(this.parentElement)"&gt ;Delete this row</td> <br></tr> <br></table> <br><script> <br>function deleteRow (obj) { <br>obj.parentElement.removeChild( obj); <br>} <br></script>