當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

DOM编程练习（慕课网题目）

發布時間：2024/7/19 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 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编程练习（慕课网题目）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。