js动态创建、删除表格示例代码
发布时间:2020-12-14 22:59:22 所属栏目:资源 来源:网络整理
导读:生成一个2000*5的表格,每个单元格的内容是行号+逗号+列号 方法一:使用createElement生成表格,使用insertRow和insertCell方法生成行列,单元格的内容使用innerHTML属性进行填充。 方法二:使用createElement生成表格,使用CreateElement方法生成行列,单元
生成一个2000*5的表格,每个单元格的内容是行号+逗号+列号 方法一:使用createElement生成表格,使用insertRow和insertCell方法生成行列,单元格的内容使用innerHTML属性进行填充。 方法二:使用createElement生成表格,使用CreateElement方法生成行列,单元格的内容使用了createTextNode方法填充。 方法三:拼接表格innerHTML属性的字符串,使用字符串 += 操作符链接字符串 方法四:拼接表格innerHTML属性的字符串,各个字符串追加数组里面,最后调用数组的join方法生成目标字符串。 运行时间比较: 方法 运行时间(ms) 方法一 93037 方法二 3341 方法三 2795 方法四 500 具体的程序如下: 复制代码 代码如下: <html> <head> <title>test page</title> <script type='text/javascript'> <!-- function createTable() { var t = document.createElement('table'); for (var i = 0; i < 2000; i++) { var r = t.insertRow(); for (var j = 0; j < 5; j++) { var c = r.insertCell(); c.innerHTML = i + ',' + j; } } document.getElementById('table1').appendChild(t); t.setAttribute('border','1'); } function createTable2() { var t = document.createElement('table'); var b = document.createElement('tbody'); for (var i = 0; i < 2000; i++) { var r = document.createElement('tr'); for (var j = 0; j < 5; j++) { var c = document.createElement('td'); var m = document.createTextNode(i + ',' + j); c.appendChild(m); r.appendChild(c); } b.appendChild(r); } t.appendChild(b); document.getElementById('table1').appendChild(t); t.setAttribute('border','1'); } function createTable3() { var data = ''; data += '<table border=1><tbody>'; for (var i = 0; i < 2000; i++) { data += '<tr>'; for (var j = 0; j < 5; j++) { data += '<td>' + i + ',' + j + '</td>'; } data += '</tr>'; } data += '</tbody><table>'; document.getElementById('table1').innerHTML = data; } function createTable4() { var data = new Array(); data.push('<table border=1><tbody>'); for (var i = 0; i < 2000; i++) { data.push('<tr>'); for (var j = 0; j < 5; j++) { data.push('<td>' + i + ',' + j + '</td>'); } data.push('</tr>'); } data.push('</tbody><table>'); document.getElementById('table1').innerHTML = data.join(''); } function showFunctionRunTime(f) { var t1 = new Date(); f(); var t2 = new Date(); alert(t2 - t1); } //--> </script> </head> <body> <div id="table1" style="border: 1px solid black"> </div> <script> showFunctionRunTime(createTable); showFunctionRunTime(createTable2); showFunctionRunTime(createTable3); showFunctionRunTime(createTable4); </script> </body> </html> 1、inserRow()和insertCell()函数 insertRow()函数可以带参数,形式如下: insertRow(index) 这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1),将新行添加到表的最后。 insertCell()和insertRow的用法相同。 2、动态设置属性和事件 上面的innerHTML和innerText都是列的属性。 innerText是添加到<tb></tb>之间的文本,innerHTML是添加到<tb></tb>之间的HTML代码 设置其他属性也是用同样的方式,比如,设置行背景色 tr.bgColor = 'red'; 设置colspan属性 td.colSpan = 3; 设置事件也一样,需要简单说明一点。 比如,我要让点击新加行的时候执行一个自己定义的函数 newClick,newClick函数如下: function newClick(){ alert("这是新添加的行"); } 对onclick事件设置这个函数的代码如下: tr.onclick = newClick; 这里需要主义的是,=后面的部分必须是函数名,而且不能带引号, newTr.onclick = newClick(); newTr.onclick = 'newClick'; newTr.onclick = "newClick"; 上面的写法都是错误的。 下面的写法,也是正确的 newTr.onclick = function newClick(){ alert("这是新添加的行"); } 动态删除表格 方法1: 复制代码 代码如下: <table id=mxh border=1> <tr> <td>第1行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td> </tr> <tr> <td>第2行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td> </tr> </table> <script> function deleteRow (tableID,rowIndex) { var table =document.all[tableID] table.deleteRow(rowIndex); } function getRowNum(tableID){ var tab = document.all[tableID] //表格行数 var rows = tab.rows.length ; //表格列数 var cells = tab.rows.item(0).cells.length ; } </script> 方法2: 复制代码 代码如下: <table id=mxh border=1> <tr> <td>第1行</td><td onclick="deleteRow(this.parentElement)">删除本行</td> </tr> <tr> <td>第2行</td><td onclick="deleteRow(this.parentElement)">删除本行</td> </tr> </table> <script> function deleteRow (obj) { obj.parentElement.removeChild(obj); } </script> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |