[javaScript]改变鼠标经过表格行背景色

来源：互联网发布：背单词的app 知乎编辑：程序博客网时间：2024/05/23 10:38
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script>window.onload=function(){changeColor();}function addElement(){var tab=document.getElementById("table");var new_id=document.createElement("td");new_id.innerHTML="xh000";var new_name=document.createElement("td");new_name.innerHTML="徐小胖";var new_ope=document.createElement("td");new_ope.innerHTML="<a href='#' onclick='delElement(this)'>删除</a>";var new_tr=document.createElement("tr");new_tr.appendChild(new_id);new_tr.appendChild(new_name);new_tr.appendChild(new_ope);tab.lastChild.appendChild(new_tr);changeColor();}function delElement(obj){document.getElementById("table").lastChild.removeChild(obj.parentNode.parentNode);}function changeColor(){var this_tr=document.getElementsByTagName("tr");for(var i=0;i<this_tr.length;i++){this_tr[i].onmouseover=function(){this.style.backgroundColor="#f2f2f2";}this_tr[i].onmouseout=function(){this.style.backgroundColor="#fff";}}}</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="delElement(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->   </tr>   <tr><td>xh002</td><td>刘小芳</td><td><a href="javascript:;" onclick="delElement(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->   </tr>     </table>   <input type="button" value="添加一行" onclick="addElement()"/>   <!--在添加按钮上添加点击事件  --> </body></html>
0 0