DOM编程练习（慕课网题目）
生活随笔
收集整理的這篇文章主要介紹了
DOM编程练习（慕课网题目）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
編程練習
制作一個表格，顯示班級的學生信息。
要求：
1. 鼠標移到不同行上時背景色改為色值為 #f2f2f2，移開鼠標時則恢復為原背景色 #fff
2. 點擊添加按鈕，能動態在最后添加一行
3. 點擊刪除按鈕，則刪除當前行
?
我的解答
<!DOCTYPE html> <html> <head><title> new document </title><meta http-equiv="Content-Type" content="text/html; charset=gbk"/><script type="text/javascript">window.onload = function () {var tr = document.getElementsByTagName("tr");for(var i=0;i<tr.length;i++){changebgc(tr[i]);}};// 鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色;function changebgc(obj) {obj.onmouseover = function () {obj.style.backgroundColor = "#f2f2f2";};obj.onmouseout = function () {obj.style.backgroundColor = "#fff";}}// 編寫一個函數，供添加按鈕調用，動態在表格的最后一行添加子節點；var num = 2;function add() {num++;var newtr = document.createElement("tr");var td1 = document.createElement("td");var td2 = document.createElement("td");var del = document.createElement("td");var newtext1 = document.createTextNode("xh00"+num);var newtext2 = document.createTextNode("學生"+num);del.innerHTML = "<a href=\"javascript:;\" οnclick=\"remove(this)\" >刪除</a>";td1.appendChild(newtext1);td2.appendChild(newtext2);var table = document.getElementById("table");newtr.appendChild(td1);newtr.appendChild(td2);newtr.appendChild(del);table.appendChild(newtr);var tr = document.getElementsByTagName("tr");for(var i= 0;i<tr.length;i++) {changebgc(tr[i]);}}// 創建刪除函數function remove(obj) {var tr = obj.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:;" οnclick="remove(this)">刪除</a></td> <!--在刪除按鈕上添加點擊事件 --></tr><tr><td>xh002</td><td>劉小芳</td><td><a href="javascript:;" οnclick="remove(this)" >刪除</a></td> <!--在刪除按鈕上添加點擊事件 --></tr></table> <input type="button" value="添加一行" οnclick="add()" /> <!--在添加按鈕上添加點擊事件 --> </body> </html>?
轉載于:https://www.cnblogs.com/sunxirui00/p/7504468.html
總結
以上是生活随笔為你收集整理的DOM编程练习（慕课网题目）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： tomcat的安装及配置
- 下一篇： VS2015 IIS Express 无