js动态创建、删除表格示例代码


Posted in Javascript onAugust 07, 2013

生成一个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>
Javascript 相关文章推荐
asp批量修改记录的代码
Jun 25 Javascript
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 #Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 #Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 #Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 #Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 #Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 #Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 #Javascript
You might like
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
requireJS使用指南
2016/04/27 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
py2exe 编译ico图标的代码
2013/03/08 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
快速了解Python相对导入
2018/01/12 Python
Python装饰器原理与用法分析
2018/04/30 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
实例讲解Python爬取网页数据
2018/07/08 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
python如何查看安装了的模块
2020/06/23 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
会计系毕业个人自荐信格式
2013/09/23 职场文书
人事专员的职责
2014/02/26 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
重阳节活动总结
2014/08/27 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
综合素质评价自我评价
2015/03/06 职场文书
基督教追悼会答谢词
2015/09/29 职场文书