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 相关文章推荐
使用JavaScript 编写简单计算器
Nov 24 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
javascript中 try catch用法
Aug 16 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
BootStrap中的表单大全
Sep 07 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
浅谈react 同构之样式直出
Nov 07 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
关于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
PHP网站提速三大“软”招
2006/10/09 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
python中可以声明变量类型吗
2020/06/18 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
DataReader和DataSet的异同
2014/12/31 面试题
管理学专业个人求职信范文
2013/12/13 职场文书
办理居住证介绍信
2014/01/15 职场文书
党员争先创优承诺书
2015/01/20 职场文书
基层党支部承诺书
2015/04/30 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
SQL语句多表联合查询的方法示例
2022/04/18 MySQL
Python简易开发之制作计算器
2022/04/28 Python
Spring Boot实现文件上传下载
2022/08/14 Java/Android