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就会被创建，
| 标签每出现一次，一个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 = "" 01-19 05:46 |