冰断秋
2019-10-03 21:05
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
var number = 3;
var xh = "xh00";
window.onload = function(){
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
var trs = document.getElementsByTagName("tr");
for (var i = 0; i<trs.length; i++){
trs[i].setAttribute("onmouseover","updatebg(id)");
trs[i].setAttribute("onmouseout","updatebg2(id)");
}
}
// 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
function add(){
var name = prompt("请输入姓名","姓名");
var tr = document.createElement("tr");
var id = "tr" + number;
tr.setAttribute("id",id);
tr.setAttribute("onmouseover","updatebg(id)");
tr.setAttribute("onmouseout","updatebg2(id)");
var xhtd = document.createElement("td");
xhtd.innerHTML = xh + number;
number++;
var nametd = document.createElement("td");
nametd.innerHTML = name;
var deltd = document.createElement("td");
var dela = document.createElement("a");
dela.innerHTML = "删除";
dela.setAttribute("href","javascript:;");
dela.setAttribute("onclick","deleteById(this);");
deltd.appendChild(dela);
tr.appendChild(xhtd);
tr.appendChild(nametd);
tr.appendChild(deltd);
document.getElementsByTagName("table")[0].appendChild(tr);
}
// 创建删除函数
function deleteById(obj){
var node = obj.parentNode.parentNode;
node.parentNode.removeChild(node);
}
function updatebg(id){
document.getElementById(id).style.background = "#f2f2f2";
}
function updatebg2(id){
document.getElementById(id).style.background = "#fff";
}
</script>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr id="tr1">
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" onclick="deleteById(this);" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr id="tr2">
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="deleteById(this);">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="add()" /> <!--在添加按钮上添加点击事件 -->
</body>
</html>
更改背景颜色通过CSS是不是更简单快捷一点?应该没什么差别的把。然后就是删除函数了,这个题目是不是超纲了,以前都没讲过this这个关键字,然后有没有只用到前边讲过的知识点实现的。
还没有人回答问题,可以看看其他问题
JavaScript进阶篇
468196 学习 · 21891 问题
相似问题