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

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
}
--------------------------------------
表格对象:
在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 = ""

你可能感兴趣的:(JavaScript)