使用domcument对象可以创建、添加、删除DOM支持的任何类型节点,因此可以使用document对象制作动态添加、删除页面元素的特效,常见的操作有如下几种:
- 使用document.createElement('tageName')创建指定标签名的元素节点(包括自定义的标签);
- 使用appendChild(node)将节点追加到所有子节点的末尾;
- 使用fathernode.insertBefore(newNode,oldNode)将fathernode的子节点newNode插入到oldNode之前;
- 使用removeChild删除节点。
下面列举一个添加和删除表格行的案例:
html如下(建立一个表格,包含商品名称、数量、单价、运费、最后计算合计总价):
<table cellpadding='0' cellspacing='0' border="0" id="goods">
<tbody>
<tr>
<th>商品名称</th>
<th>数量 (件)</th>
<th>单价 (元)</th>
<th>运费 (元)</th>
<th>合计</th>
</tr>
<tr>
<td>鼠标</td>
<td>2</td>
<td>80</td>
<td>10</td>
<td>170</td>
</tr>
<tr>
<td>鼠标</td>
<td>2</td>
<td>80</td>
<td>10</td>
<td>170</td>
</tr>
</tbody>
</table>
<input type="button" value="删除一行" onclick="delLine()">
<input type="button" value="添加一行" onclick="addLine()">
js代码:
/*
这个是点击添加的函数
*/
function addLine() {
var onetr = document.createElement("tr"); //创建一行表格
var onetd = document.createElement("td"); //创建一个单元格
var twotd = document.createElement("td");
var threetd = document.createElement("td");
var fourtd = document.createElement("td");
var fivetd = document.createElement('td');
onetd.innerHTML = "显示屏";//在单元格中输入内容
twotd.innerHTML = "4";
threetd.innerHTML = "120";
fourtd.innerHTML = 10;
// fivetd.innerHTML=490;
var count = 4 * 120 + 10;//计算总价
fivetd.innerHTML = (count);
onetr.appendChild(onetd);//追加子节点
onetr.appendChild(twotd);
onetr.appendChild(threetd);
onetr.appendChild(fourtd);
onetr.appendChild(fivetd);
var goods = document.getElementsByTagName("tbody")[0]; //获取table
goods.appendChild(onetr);
}
/*
这个是点击删除的函数
*/
function delLine() {
var goods = document.getElementsByTagName('tbody')[0];//获取table
if (goods.childNodes.length > 1) {//
goods.removeChild(goods.lastChild);
} else {
alert('不能删除标题');
}
}
</script>