js动态创建、删除表格示例代码
js动态创建、删除表格示例代码
发布时间:2016-12-30 来源:查字典编辑
摘要:生成一个2000*5的表格,每个单元格的内容是行号+逗号+列号方法一:使用createElement生成表格,使用insertRow和ins...

生成一个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'>

<>

</script>

</head>

<body>

<div id="table1">

</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>删除本行</td>

</tr>

<tr>

<td>第2行</td><td>删除本行</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>删除本行</td>

</tr>

<tr>

<td>第2行</td><td>删除本行</td>

</tr>

</table>

<script>

function deleteRow (obj) {

obj.parentElement.removeChild(obj);

}

</script>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类