依前人之码 选取目前所学内容中最简单方式之一 构造如下代码 大家评价一下
<!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(){
cg();
}
function cg(){
var dxpr=document.getElementsByTagName("tr");
for(i=1;i<dxpr.length;i++){
dxpr[i].setAttribute("onmouseover","changecolor(this)");
dxpr[i].setAttribute("onmouseout","backcolor(this)");
}
}
function changecolor(obj){
obj.style.backgroundColor="#f2f2f2";
}
function backcolor(obj){
obj.style.backgroundColor="#fff";
}
// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点
function mk(){
var dxtb=document.getElementById("table");
var dx2=document.createElement("tr");
var name=document.getElementsByName("name")[0];
var number=document.getElementsByName("number")[0];
dx2.innerHTML = "<td>"+number.value+"</td><td>"+name.value+"</td><td><a href='javascript:;' onclick='dele(this)'>删除</a></td>";
dxtb.appendChild(dx2);
}
// 创建删除函数
function dele(n){
var dx3=n.parentNode.parentNode.parentNode.removeChild(n.parentNode.parentNode);
}
</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="dele(this)">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="dele(this)">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<br/>
<p1>名字</p1>
<input type="text" name="name" > <br/>
<p1>学号</p1>
<input type="text" name="number" ><br/>
       
<input type="button" value="添加一行" onclick="mk()" /> <!--在添加按钮上添加点击事件 -->
</body>
</html>
<!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(){ cg(); } function cg(){ var dxpr=document.getElementsByTagName("tr"); for(i=1;i<dxpr.length;i++){ dxpr[i].setAttribute("onmouseover","changecolor(this)"); dxpr[i].setAttribute("onmouseout","backcolor(this)"); } } function changecolor(obj){ obj.style.backgroundColor="#f2f2f2"; } function backcolor(obj){ obj.style.backgroundColor="#fff"; } // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点 function mk(){ var dxtb=document.getElementById("table"); var dx2=document.createElement("tr"); var name=document.getElementsByName("name")[0]; var number=document.getElementsByName("number")[0]; dx2.innerHTML = "<td>"+number.value+"</td><td>"+name.value+"</td><td><a href='javascript:;' onclick='dele(this)'>删除</a></td>"; dxtb.appendChild(dx2); } // 创建删除函数 function dele(n){ var dx3=n.parentNode.parentNode.parentNode.removeChild(n.parentNode.parentNode); } </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="dele(this)">删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> <tr> <td>xh002</td> <td>刘小芳</td> <td><a href="javascript:;" onclick="dele(this)">删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> </table> <br/> <p1>名字</p1> <input type="text" name="name" > <br/> <p1>学号</p1> <input type="text" name="number" ><br/>         <input type="button" value="添加一行" onclick="mk()" /> <!--在添加按钮上添加点击事件 --></body></html>
