JS动态表格
动态设置表格
方法一：拼接表格innerHTML属性的字符串，各个字符串追加数组里面，最后调用数组的join方法生成目标字符串。
方法二：已用Html绘制表格，利用insertRow增加行，单元格的内容使用innerHTML属性进行填充。
方法三：已用Html绘制表格，使用CreateElement方法生成行列，单元格的内容使用了createTextNode方法填充。
<html> <head> <title>test page</title> <script type='text/javascript'> //<!--var content = new Array(["张三","经理"],["李四","财务"],["王五","人力"]); function createTable() { var data = new Array(); data.push('<table border=1><tbody>');data.push('<tr><td>姓名</td><td>职位</td>');for (var i = 0; i < content.length; i++) {data.push('<tr>');for (var j = 0; j < content[i].length; j++) {data.push('<td>' + content[i][j] + '</td>');}data.push('</tr>');}data.push('</tbody><table>');document.getElementById('tableDiv1').innerHTML = data.join(''); } function showFunctionRunTime(f) {var t1 = new Date();f();var t2 = new Date();alert(t2 - t1);} function addRow1(){for (var i = 0; i < content.length; i++) { var row = document.getElementById('t2').insertRow(); for(var j=0;j<content[i].length;j++){ var col = row.insertCell(); col.innerHTML = content[i][j]; }}}function addRow2() {var b = document.createElement('tbody');for (var i = 0; i < content.length; i++) { var row = document.createElement('tr'); for(var j=0;j<content[i].length;j++){var col = document.createElement('td'); col.innerHTML = content[i][j]; //var cont = document.createTextNode(content[i][j]); //col.appendChild(cont); row.appendChild(col); }b.appendChild(row);}document.getElementById('t3').appendChild(b); } //--> </script> </head> <body><div id="tableDiv1" style="border: 1px solid black"></div><div id="tableDiv2" style="border: 1px solid black"><table id = 't2' border=1><tr><td>姓名</td><td>职位</td></tr></table></div><div id="tableDiv3" style="border: 1px solid black"><table id = 't3' border=1><tr><td>姓名</td><td>职位</td></tr></table></div> <script> createTable(); addRow1(); addRow2(); </script> </body></html>