dom操作与实例
父节点.removeChild("子节点");
创建节点： 创建元素节点 createElement("元素节点名称");
创建属性节点 createTextNode("文本的内容");
创建属性节点 createAttribute("属性名");
添加节点 appendChild(创建好的元素节点或者文本节点);
table(节点名).appendChild(新创建的节点);
设置属性
节点名.setAttribute(属性名，属性值);
可编辑表格实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.input{
color:#999;
font-size:12px;
background-color:#FF9;
width:100px;
height:20px;
}
.delete{
background-color:#F99;
}
</style>
</head>
<body>
<table width="200" border="0" bgcolor="#00FF66">
<tr>
<td height="426" valign="top">
<table width="290" border="1" bgcolor="#FFFF33" id="left">
<tr>
<th scope="col" >姓名</th>
<th scope="col" >性别</th>
<th scope="col" >年龄</th>
<th scope="col" >电话</th>
<th scope="col" >操作</th>
</tr>
</table>
</td>
<td><table width="236" border="0">
<tr>
<td width="61" height="66">姓名：</td>
<td width="165"><input type="text" value="悟空" id="name" class="input"></td>
</tr>
<tr>
<td height="70">性别：</td>
<td><input type="text" value="女" id="sex" class="input"/></td>
</tr>
<tr>
<td height="60">年龄</td>
<td><input type="text" value="2000" id="age" class="input"></td>
</tr>
<tr>
<td height="71">电话</td>
<td><input type="text" value="1258059213" id="phone" class="input"></td>
</tr>
<tr>
<td height="22" colspan="2" align="right"><input type="button" value="提交" onclick="tijiao()"></td>
</tr>
</table>
</td>
</tr>
</table>
<script>
var focu=0;
//获取表单值
function tijiao(){
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var sex = document.getElementById("sex").value;
var phone = document.getElementById("phone").value;
create(name,age,sex,phone);
}
//获取tab节点
var tab = document.getElementById("left");
//将获取的表单值添加到表格中
function create(name,age,sex,phone){
//创建tr节点
var tr = document.createElement("tr");
//添加tr节点
tab.appendChild(tr);
for(var j=1; j<=5; j++){
//创建td节点
var td = document.createElement("td");
switch(j){
case 1:
//创建文本节点
var text = document.createTextNode(name);
break;
case 2:
//创建文本节点
var text = document.createTextNode(sex);
break;
case 3:
//创建文本节点
var text = document.createTextNode(age);
break;
case 4:
//创建文本节点
var text = document.createTextNode(phone);
break;
}
if(j==5){
//创建元素节点input按钮，并添加属性
var text = document.createElement("input");
text.setAttribute("type","button");
text.setAttribute("value","删除");
text.setAttribute("id","id"+tab.childNodes.length);
text.setAttribute("class","delete");
text.setAttribute("onclick","del(this.id)");
}else{
//给td添加onclick属性
td.setAttribute("onclick","updateBefore(this.id)");
td.setAttribute("id","t"+j+"d"+tab.childNodes.length);
}
td.appendChild(text);
tr.appendChild(td);
}
}
//删除信息
function del(th){
//获取父标记
var parent = document.getElementById(th).parentNode.parentNode;
parent.parentNode.removeChild(parent);
}
//更新前
function updateBefore(td_id){
if(focu==1){ }else{
//获取选中的节点
var prinode = document.getElementById(td_id);
//获取该节点中的信息，并且保存在删除
var pritext = prinode.innerHTML; prinode.innerHTML="";
//创建input节点
var inp1 = document.createElement("input");
//向获取的节点中添加input节点
prinode.appendChild(inp1);
inp1.setAttribute("value",pritext);
inp1.setAttribute("id",td_id+"new");
inp1.setAttribute("onblur","update(this.id)");
inp1.setAttribute("onfocus","onfocu()");
inp1.style.width="100px";
//将input框获取焦点
document.getElementById(td_id+"new").focus();
}
}
//更新
function update(inputid){
//使更新可以用
onblur();
//获取该节点的value值
var value = document.getElementById(inputid).value;
//将新的信息添加到原来的td中,先将该标记的父标记获取到
var p1 = document.getElementById(inputid).parentNode.id;
document.getElementById(p1).innerHTML=value;
//删除input节点
try{
var aa = document.getElementById(inputid);
aa.parentNode.removeChild(aa);
}catch(e){ }
}
//检测更新时的onclick时间，如果onclick触发了就不能再点击了否则会产生错误，所以用一个全局变量来判断
function onfocu(){
focu=1;
}
function onblur(){
focu=0;
}
</script>
</body>
</html>