                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

鼠標經過事件不起作用

<!DOCTYPE html>
<html>
<head>
?? ?<meta charset="UTF-8">
?? ?<title>Document</title>
<script type="text/javascript">
?????? ?
?????? ?
??? window.onload = function(){
??????? var trs = document.getElementsByTagName("tr");

???????? for (var i = 0; i < trs.length; i++) {
??????? ??? ?background(trs[i]);
??????? }
??? }

???? function background(object){
???????????? object.onmouseover =? function(){
??????????? ??? ?object.style.backgroundColor = #f2f2f2;
???????????? }
???????????? object.onmouseout = function(){
??????????? ??? ?object.style.backgroundColor = #fff;
???????????? }
???????? }
?? ?var num = 2;
???? function addone(){
???????? num++;
???????? var tr = document.createElement("tr");
???????? var td1 = document.createElement("td");
???????? var td2 = document.createElement("td");
???????? var td3 = document.createElement("td");
???????? var table = document.getElementById("table");
???????? table.lastChild.appendChild(tr);
???????? tr.appendChild(td1);
???????? tr.appendChild(td2);
???????? tr.appendChild(td3);
???????? td1.innerHTML = "xh00" + num;
???????? td2.innerHTML = "第" + num +"位同學";
???????? td3.innerHTML = "<a href = 'javascript:;' onclick='del(this)'>刪除</a>"
???? }
?? ??? ??? ?
? ??? ?
???? // 創建刪除函數
???? function del(object){
??????? var tr = object.parentNode.parentNode;
??????? tr.parentNode.removeChild(tr);
???? }

</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="del(this)">刪除</a></td>?? 
?? ??? </tr>

?? ??? <tr>
?? ??? ?<td>xh002</td>
?? ??? ?<td>劉小芳</td>
?? ??? ?<td><a href="javascript:;" onclick="del(this)" >刪除</a></td>?? 
?? ??? </tr> ?

?? ??? </table>
?? ??? <input type="button" value="添加一行" onclick = "addone()" />?? <!--在添加按鈕上添加點擊事件? -
</body>
</html>