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

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

}

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

表格对象：

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

标签每出现一次，一个TableCell对象就会被创建。

Table对象：

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

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

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

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

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

TableRow对象：

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

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

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

标签

     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）

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

根据行索引增删改例子：

名称

价格

操作

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

修改部分功能：

function modify(obj){

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

obj.value="确定";

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

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

}else{

obj.value="修改";

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

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

}

}

直接在标签内部调用，比如col2.innerHTML = ""

阅读(2177) | 评论(0) | 转发(0) |

0

上一篇：Uploadify 3.2 参数属性、事件、方法函数详解

下一篇：正则表达式手册

给主人留下些什么吧！~~

评论热议

请登录后评论。

登录 注册

关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6