javascript进阶篇-9-22-改1
2016-07-31 22:37:30 来源：慕课网
<!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>
