DOM基础教程之使用DOM控制表格_基础知识-js教程-PHP中文网

DOM基础教程之使用DOM控制表格_基础知识

php中文网

发布： 2016-05-16 16:18:47

原创

1569人浏览过

表格的css控制就先不说了，首先分享下表格常用的dom

表格添加操作的方法常用的为insertRow()和insertCell()方法。

row是从零开始计算起的，例如：

复制代码代码如下:

var oTr = document.getElementById("member").insertRow(2)

是指将新行添加到第二行。

复制代码代码如下:

var aText = new Array();

aText[0] = document.createTextNode("fresheggs");

aText[1] = document.createTextNode("W610");

aText[2] = document.createTextNode("Nov 5th");

aText[3] = document.createTextNode("Scorpio");

aText[4] = document.createTextNode("1038818");

for(var i=0;i
var oTd = oTr.insertCell(i);

oTd.appendChild(aText[i]);

}

变量oTr即为表格插入新行，再利用insertCell为这行插入新的数据，利用createTextNode创建新的文本节点，在appendChild给oTd，oTd即为新的单元格。　　

1.插入一行（动态添加表格）

复制代码代码如下:

    
Member List

Name
Class
Birthday
Constellation
Mobile

isaac
W13
Jun 24th
Cancer
1118159

girlwing
W210
Sep 16th
Virgo
1307994

tastestory
W15
Nov 29th
Sagittarius
1095245

Member List
Name	Class	Birthday	Constellation	Mobile
isaac	W13	Jun 24th	Cancer	1118159
girlwing	W210	Sep 16th	Virgo	1307994
tastestory	W15	Nov 29th	Sagittarius	1095245

2.修改表格的内容

网页制作与PHP语言应用

图书《网页制作与PHP语言应用》，由武汉大学出版社于2006出版，该书为普通高等院校网络传播系列教材之一，主要阐述了网页制作的基础知识与实践，以及PHP语言在网络传播中的应用。该书内容涉及：HTML基础知识、PHP的基本语法、PHP程序中的常用函数、数据库软件MySQL的基本操作、网页加密和身份验证、动态生成图像、MySQL与多媒体素材库的建设等。

460

查看详情

当表格建立后，可以直接使用HtmlDom对表格进行操作，相比document.getElementById(),document.getElementsByTagName()操作更为方便。
oTable.rows[i].cell[j]
以上通过rows、cells两个属性轻松访问到表格特定的内容第i行和第j列(都是从0开始计数)，获得单元格对象后就可以使用innerHTML属性修改翔宇的内容了。
例如修改4行5列的内容为good
则可以使用以下代码

复制代码代码如下:

var oTable = document.getElementById("table1");

oTable.rows[4].cells[5].innerHTML = "good";

3.删除表格内容

表格既然有添加、修改、就有删除功能。
表格中删除行使用deleteRow(i)方法，其中i为行号。
表格中删除列使用tr的deleteCell(j)方法。

如下代码表示删除表格的第二行及原来表格第三行的第二列

复制代码代码如下:

 var oTable = document.getElementById("table1"); oTable.deleteRow[2]; oTable.rows[2].deleteCell[3];

如下代码表示删除表格的第二行及原来表格第三行的第二列考虑到动态删除又不影响整体html框架，又或者表格内容很多的情况下，可以采用动态删除添加的办法

复制代码代码如下:

    
Member List

Name
Class
Birthday
Constellation
Mobile

isaac
W13
Jun 24th
Cancer
1118159

girlwing
W210
Sep 16th
Virgo
1307994

tastestory
W15
Nov 29th
Sagittarius
1095245

Member List
Name	Class	Birthday	Constellation	Mobile
isaac	W13	Jun 24th	Cancer	1118159
girlwing	W210	Sep 16th	Virgo	1307994
tastestory	W15	Nov 29th	Sagittarius	1095245

删除列

复制代码代码如下:

function deleteColumn(oTable, iNum) {

                //自定义删除列函数，即每行删除相应单元格

                for (var i = 0; i 
                    oTable.rows[i].deleteCell(iNum);

            }

            window.onload = function() {

                var oTable = document.getElementById("table1");

                deleteColumn(oTable, 2);

            }

对于删除表格列而言，DOM中没有直接可调用的方法，需要自己来写deleteColumn()方法，该方法接受两个参数，一个参数是表格对象，另外一个参数则是希望删除的列号。编写方法很简单，利用deleteCell()方法,每一行都执行相应的删除单元格的方法。