参考答案，注释自己总结了很多问题，如果遇到有问题的可以看看。
慕慕三帅
2019-09-12 23:43
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
window.onload = function(){
//返回所有tr标签节点的一数组o1
var o1=document.getElementsByTagName("tr");
//利用for循环使鼠标指针移入或移出事件来绑定每个tr标签节点
for(i=0;i<o1.length;i++)
{
bgover(o1[i]);
bgout(o1[i]);
}
//设置鼠标指针移入指定的对象的事件函数 ，具体可以参考（ https://www.w3school.com.cn/jsref/event_onmouseout.asp ）
function bgover(obj){
obj.onmouseover=function(){
obj.style.backgroundColor="#F2ACAC";
}
}
//设置鼠标指针移出指定的对象的事件函数
function bgout(obj){
obj.onmouseout=function(){
obj.style.backgroundColor="";
}
}
}
// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
function add(){
//创建节点标签1个tr 3个td
var a0=document.createElement("tr");
var a1=document.createElement("td");
var a11=document.createElement("td");
var a111=document.createElement("td");
a1.innerHTML="xh00"+add2(); //对第一个td标签做一些小改动,加入add2()函数
a11.innerHTML="<input type=text />";//第二个td标签内加入text目的是为了能输入
//这里好多人出现错误，就是在"javascript:;" 中把双引号改为单引号就行了，而且onclick='del(this)' 最后也这样用单引号，原因我就不说了。
a111.innerHTML="<a href='javascript:;' onclick='del(this)' >删除</a>";
//以下是用appendChild把一个个的子节点“装”进父亲节点中
a0.appendChild(a1);
a0.appendChild(a11);
a0.appendChild(a111);
var table=document.getElementsByTagName("table");
table[0].appendChild(a0);
//这个add2()目的是在按了添加一行以后第3行或者以下“学号”可以跟行数对应起来这亚子。
function add2(){
var b1=document.getElementsByTagName("tr");
var num=b1.length;
return num;
}
//同样添加了的行数的背景要实现鼠标移动改变背景
window.onload();
}
// 创建删除函数 具体可以参考（https://www.w3school.com.cn/jsref/dom_obj_event.asp）
function del(obj){
var d1=obj.parentNode.parentNode;
d1.parentNode.removeChild(d1);
}
</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="del(this)">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="del(this)">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="add()" /> <!--在添加按钮上添加点击事件 -->
</body>
</html>
1回答
-
- 慕妹9089555
- 2019-09-24 11:09:13
谢谢分享
JavaScript进阶篇
468060 学习 · 21891 问题
相似问题