代码要求都实现了，希望能帮到你们
慕运维2444244
2018-08-02 19:27
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<style type="text/css">
#select{
background:#f2f2f2;
}
</style>
<script type="text/javascript">
//添加一行函数
function add(){
var Table=document.getElementById("table");
var newnode=document.createElement("tr");
var num=prompt("请输入需学号：");
var name=prompt("请输入名字：");
var first=document.createElement("td");
var second=document.createElement("td");
var third=document.createElement("td");
var a=document.createElement("a");
a.innerHTML="删除";
a.href="javascript:;";
first.innerHTML=num;
second.innerHTML=name;
third.appendChild(a);
newnode.appendChild(first);
newnode.appendChild(second);
newnode.appendChild(third);
Table.appendChild(newnode);
onload1();
onload2();
}
// 创建删除函数
function onload1(){
var Table=document.getElementById("table");
var Del=Table.getElementsByTagName("a");
for(var i=0;i<Del.length;i++)
{
Del[i].onclick=function()
{
var fat=this.parentNode;
var grad=fat.parentNode;
var ggrad=grad.parentNode;
var message=confirm("确定删除？");
if(message==true){
var de=ggrad.removeChild(grad);
}
}
}
}
//鼠标滑过的背景颜色
function onload2(){
var trs=document.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++)
{
trs[i].onmouseover=function()
{
//alert(trs.length);
this.id="select";
}
trs[i].onmouseout=function()
{
this.id="";
}
}
}
window.onload=function()//以此来实现双重加载
{
onload1();
onload2();
}
</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:;" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="add()" /> <!--在添加按钮上添加点击事件 -->
</body>
</html>
1回答
-
- 学前端的小王
- 2018-08-04 11:49:43
你好！我有一个疑问，在删除函数那边，为什么一定要从标签a开始向上获取父节点然后才能删除tr。
我尝试了用td向上但是没有效果。
JavaScript进阶篇
468061 学习 · 21891 问题
相似问题