JS:DOM相关：table对象，节点操作

来源：互联网发布：淘宝评价保留几个月编辑：程序博客网时间：2024/06/06 04:25

10、

DOM相关：

创建节点：

createElement_x(tagName) //按照给定的标签名称创建一个新的元素节点

appendChild(nodeName) //向已存在节点列表的末尾添加新的子节点

insertBefore(newNode,oldNode) //向指定的节点前面插入一个新的子节点,oldNode是可选项

cloneNode(deep) //复制某个节点，true时表示包括其下的所有子节点信息，false时只复制指定的节点和它的属性

例子：

function newNode(){

var oldNode = document.getElementByIdx_x("oldImg");

var image = document.createElement_x("img"); //创建一个图片节点

image.setAttribute("src","1.jpg");

document.body.insertBefore(image,oldNode); //可以是其他标签内insertBefore，比如有一个td的id=t1，那么document.getElementByIdx_x("t1").parentNode.insertBefore(image,oldNode);

}

function copyImg(){

var oImg = document.getElementByIdx_x("oldImg");

var copyImg = oImg.cloneNode(false);

document.body.appendChild(copyImg);

}

------------------------------------

删除和替换节点：

removeChild(node) //删除指定节点

replaceChild(new,old) //用其他节点替换指定的节点

例子：

function delNode(){

var dNode = document.getElementByIdx_x("delNode");

document.body.removeNode(dNode);

}

function repNode(){

var oldImg = document.getElementByIdx_x("oldImg");

var newImg = document.createElement_x("img");

newImg.setAttribute("src","1.jpg");//=>newImg.src="1.jpg";

document.body.replaceNode(newImg,oldImg);//用newNode替换oldNode

}

--------------------------------------

表格对象：

在HTMLDOM中Table对象代表一个HTML表格，TableRow对象代表HTML表格的行，TableCell对象代表HTML表格的单元格，在HTML文档中可通过动态创建Table对象，TableRow对象和TableCell对象来创建HTML表格，在HTML文档中<table>每出现一次，一个Table就会被创建，<tr>标签每出现一次，一个TableRow对象就会被创建；<td>标签每出现一次，一个TableCell对象就会被创建。

Table对象：

属性：rows[] //返回包含表格中所有行的一个数组

方法：insertRow(index):从表格中在第index行前插入新行，index为0时将被插入到第一行

deleteRow(index):从表格中删除一行，index为0时表示删除当前行

【PS:index必须是小于表格中所有行数的整数】

------------------------------------------

TableRow对象：

属性：cells[] //返回包含行中所有单元格的一个数组

rowIndex//返回该行在表中的位置

方法：insertCell()//在一行中的指定位置插入一个空的<td>标签

deleteCell() //删除行中指定的单元格

例子：

tableOjbect.insertCell(index);//在index所在单元格前插入，index为0时则新单元格被插入到行的开头

tableObject.deleteCell(index);

------------------------------------------

TableCell对象：

属性：cellIndex //返回单元格在某行单元格集合中的位置

innerHTML

align

className

综合例子：

function addRow(){

var newRow = document.getElementByIdx_x("myTable").insertRow(2);//在插入新行的时候就获得该对象，这方法不错，这里是在第3行前插入新行

var col1 = newRow.insertCell(0); //给新列添加第一个单元格

col1.innerHTML = "新行的第1个单元格内容";

var col2 = newRow.insertCell(1);

col2.innerHTML = "新行的第2个单元格内容";

col2.align = "right";

}

function updateRow(){

var uRow = document.getElementByIdx_x("myTable").rows[0];

uRow.className = "title";

}

function delRow(){

document.getElementByIdx_x("myTable").deleteRow(1); //删除第二行

}

获得行数：var len = document.getElementByIdx_x("myTable").rows.length; //rows是数组，所以可以用length来获得大小

一般上面的len用于在表格的最后一行下增加一行，即新增的行的索引为（len-1）

---------------------------------------------------------

根据行索引增删改例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0Transitional//EN">

<html>

<head>

<title>根据行索引删除行</title>

<scripttype="text/javascript">

function add(){

var addTable = document.getElementByIdx_x("myTB");

var row_index = addTable.rows.length; //照道理应该还要-1，IE9,FF4兼容性问题？

var newRow = addTable.insertRow(row_index);

var col_0 = newRow.insertCell(0);

col_0.innerHTML = "抗疲劳神奇钛圈";

var col_1 = newRow.insertCell(1);

col_1.innerHTML = "&yen: 550";

var col_2 = newRow.insertCell(2);

col_2.innerHTML = "<input type='button'value='删除' onclick='del(this.parentNode.parentNode.rowIndex)'/>";

var col_3 = newRow.insertCell(3);

col_3.innerHTML = "<input type='button'value='修改' onclick='modify(this)' />";

}

function del(ri){

var del_index =document.getElementByIdx_x("myTB").deleteRow(ri);

}

//这里注意下，先是将单元格中的值保存在一个变量中

function modify(obj){

if(obj.value=="修改"){

obj.value="确定";

var v =obj.parentNode.parentNode.cells[1].innerHTML;

obj.parentNode.parentNode.cells[1].innerHTML ="<input type='text' value='"+v+"' size='5'/>"; //这里的格式看看

}else{

obj.value="修改";

var v =obj.parentNode.parentNode.cells[1].firstChild.value;

obj.parentNode.parentNode.cells[1].innerHTML = v;

}

</script>

</head>

<body>

<tr>

</tr>

</table>

<div>

</div>

</body>

</html>

--------------------------------------------------------------------------

修改部分功能：

function modify(obj){

if(obj.value=="修改"){

obj.value="确定";

var v = obj.parentNode.parentNode.cells[1].innerHTML; //这里把单元格中的<input>作为obj传入

obj.parentNode.parentNode.cells[1].innerHTML ="<input type ='text'value='"+v+"'/>";

}else{

obj.value="修改";

var v = obj.parentNode.parentNode.cells[1].firstChild.value;//获得td下的input标签对象的value值

obj.parentNode.parentNode.cells[1].innerHTML = v;

}

直接在标签内部调用，比如col2.innerHTML = "<inputtype='text' value='修改' onclick='modify(this)'/>"