您的位置：首页 > Web前端 > JavaScript

javascript实现表格的添加和删除

2016-09-01 22:07 337 查看

注意window.onload()会在网页完成加载后立即执行，我们可以在这个时候为一些元素绑定一些事件响应函数，而一般的函数调用可以写在window.load()函数之外。

代码很简单：

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
window.onload=function(){
// 为每一行绑定onmouseover和onmouseout事件的响应函数
var trs = document.getElementsByTagName("tr");
for(var i=0; i<trs.length; ++i){
trs[i].onmouseover=function(){
this.style.backgroundColor="#f2f2f2";
}
trs[i].onmouseout=function(){
this.style.backgroundColor="#fff";
}
}
//为按钮绑定onclick的响应事件
var btn = document.getElementById("add");
btn.onclick = function(){
var tb = document.getElementById("table");
var tr = document.createElement("tr");
tr.innerHTML = "<tr><td>xh001</td><td>王小明</td><td><a href='javascript:;' onclick='delrow(this)'>删除</a></td></tr>";
tr.onmouseover=function(){
this.style.backgroundColor="#f2f2f2";
}
tr.onmouseout=function(){
this.style.backgroundColor="#fff";
}
tb.appendChild(tr);
}
}
//删除某行
function delrow(obj){
var parent = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
parent.removeChild(tr);
}
</script>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" onclick="delrow(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="delrow(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
</tr>
</table>
<script type="text/javascript">
</script>
<input id="add" type="button" value="添加一行"  />   <!--在添加按钮上添加点击事件  -->
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航