您的位置：首页 > 其它

关于XML的DOM的节点操作

2015-10-10 10:59 337 查看

前言：
具体可参考W3School全套教程的XML DOM中的节点操作

代码示例如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>添加表格行</title>
</head>
<script type="text/javascript">
<!--
function addtr(){
//拿到填写的信息
var name = document.getElementById("name").value ;
var email = document.getElementById("email").value ;
var age = document.getElementById("age").value ;

//创建一个行及4个单元格
var tr = document.createElement("tr") ;

//创建4个单元格，并赋值
var nameTd = document.createElement("td") ;
nameTd.innerHTML = name ;
var emailTd = document.createElement("td") ;
emailTd.innerHTML = email ;
var ageTd = document.createElement("td") ;
ageTd.innerHTML = age ;
var btnTd = document.createElement("td") ;
btnTd.innerHTML = "<button onclick = 'delTr(this)'>删除</button>" ;

//组合各个控件
tr.appendChild(nameTd) ;
tr.appendChild(emailTd) ;
tr.appendChild(ageTd) ;
tr.appendChild(btnTd) ;

//拿到第二个表格对象
var table = document.getElementsByTagName("table")[1] ;

//将创建的新行添加到tobody中
table.firstChild.appendChild(tr);
}

function delTr(btn){
//删掉行
//采用removeChild()
//父亲(tbody)干掉儿子(tr)
//拿到曾爷爷
var tbody = btn.parentNode.parentNode.parentNode ;
//拿到爷爷
var tr =  btn.parentNode.parentNode ;
//曾爷爷干掉爷爷
tbody.removeChild(tr);
}
//-->
</script>
<body>
<table width = 600 height = 100 align = center>
<tr>
<td>姓名:</td>
<td><input type="text" name="" id = "name"></td>
<td>邮箱:</td>
<td><input type="text" name="" id = "email"></td>
<td>年龄</td>
<td><input type="text" name="" id = "age"></td>
</tr>
<tr>
<td align = "center" colspan = "6"> <input type="button" value="添加" onclick="addtr()"></td>
</tr>
</table>
<br>
<br>
<br>
<br>
<hr>
<table width = "500" border =1 align = center>
<tr>
<td>姓名</td>
<td>邮箱</td>
<td>年龄</td>
<td>操作</td>
</tr>
</table>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航