javascript进阶篇-9-22-改1
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>excel</title>
<script type="text/javascript">
window.onload=function(){
changeBGC();
}
function addOne(){
var tr_nodes=document.getElementsByTagName("tr");
var new_tr = document.createElement("tr");
for(var i=0;i<2;i++){
var new_td = document.createElement("td");
new_td.innerHTML="<input type='text' />";
new_tr.appendChild(new_td);
}
var new_td = document.createElement("td");
new_td.innerHTML="<a href='javascript:;' onclick='removeTr(this)'>删除</a>";
new_tr.appendChild(new_td);
tr_nodes[0].parentNode.appendChild(new_tr);
changeBGC();
}
function removeTr(obj){
obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
}
function changeBGC(){
var tag_trs = document.getElementsByTagName("tr");
for(var i=1;i<tag_trs.length;i++){
tag_trs[i].onmouseover=function(){
this.style.backgroundColor="#f2f2f2";
}
tag_trs[i].onmouseout=function(){
this.style.backgroundColor="#fff";
}
}
}
</script>
</head>
<body>
<table border="1" width="50%" id="table">
<tbody>
<tr>
<td>学号</td>
<td>姓名</td>
<td>操作</td>
</tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" onclick="removeTr(this)">删除</a></td>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="removeTr(this)">删除</a></td>
</tr>
</tbody>
</table>
<input type="button" value="添加一行" onclick="addOne()"/>
</body>
</html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦