小学渣丶
2017-01-16 11:55
<!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(){
var trc=document.getElementsByTagName("tr");
for(var i=0;i<trc.length;i++){
trc[i].onmouseover=function(){
this.style.backgroundColor="#f2f2f2";
}
trc[i].onmouseout=function(){
this.style.backgroundColor="#fff";
}
}
}
// 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
function add(){
var tab=document.getElementById("table").lastChild;
var line=document.createElement("tr");
line.innerHTML=
"<td><input type='text'></td>
+
<td>< input type='text'></td>
+<td><a href='javascript:;' onclick='del(this)'></td>"
tab.appendChild(line);
}
// 创建删除函数
function del(){
var tab=document.getElementById("table");
var tr=document.getElementsByTagName("tr");
tab.removeChild("tr");
}
</script>
</head>
<body>
<style type="text/css">
table,th,td{
border:1px solid #328AA4;
}
td input{
border:none;
width:100%;
height:100%;
}
</style>
<table border="01" width="50%" id="table">
<tr>
<td>学号</td>
<td>姓名</td>
<td>操作</td>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" onclick="del()" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="del()">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="add()" /> <!--在添加按钮上添加点击事件 -->
</body>
</html>
你在chrome里加载代码后把f12打开,然后你再点击操作,没反应的话就必然有错,f12框里会有提示,哪行代码出错,一目了然。 我就不帮你检查了,自己debug会有收获
JavaScript进阶篇
468061 学习 · 21891 问题
相似问题