js动态创建、删除表格示例代码_javascript技巧-js教程-PHP中文网

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

php中文网

发布： 2016-05-16 17:26:27

原创

1422人浏览过

生成一个2000*5的表格，每个单元格的内容是行号+逗号+列号

方法一：使用createElement生成表格，使用insertRow和insertCell方法生成行列，单元格的内容使用innerHTML属性进行填充。
方法二：使用createElement生成表格，使用CreateElement方法生成行列，单元格的内容使用了createTextNode方法填充。
方法三：拼接表格innerHTML属性的字符串，使用字符串 += 操作符链接字符串
方法四：拼接表格innerHTML属性的字符串，各个字符串追加数组里面，最后调用数组的join方法生成目标字符串。

运行时间比较:
方法运行时间(ms)
方法一 93037
方法二 3341
方法三 2795
方法四 500

具体的程序如下：

复制代码代码如下:

test page

<script> <BR>showFunctionRunTime(createTable); <BR>showFunctionRunTime(createTable2); <BR>showFunctionRunTime(createTable3); <BR>showFunctionRunTime(createTable4); <BR></script>

1、inserRow()和insertCell()函数
　　insertRow()函数可以带参数，形式如下：
　　insertRow(index)
　　这个函数将新行添加到index的那一行前，比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1),将新行添加到表的最后。
　　insertCell()和insertRow的用法相同。
　　2、动态设置属性和事件
　　上面的innerHTML和innerText都是列的属性。
　　innerText是添加到之间的文本，innerHTML是添加到之间的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：

复制代码代码如下:

 
第1行
删除本行 

第2行
删除本行 

<script> <BR>function deleteRow (tableID, rowIndex) { <BR>var table =document.all[tableID] <BR>table.deleteRow(rowIndex); <BR>} <BR>function getRowNum(tableID){ <BR>var tab = document.all[tableID] <BR>//表格行数 <BR>var rows = tab.rows.length ; <BR>//表格列数 <BR>var cells = tab.rows.item(0).cells.length ; <BR>} <BR></script>

方法2：

复制代码代码如下:

 
第1行
删除本行 

第2行
删除本行 

<script> <BR>function deleteRow (obj) { <BR>obj.parentElement.removeChild(obj); <BR>} <BR></script>