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 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦