制作一个表格，显示班级的学生信息。
生活随笔
收集整理的這篇文章主要介紹了
制作一个表格，显示班级的学生信息。
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
編程練習
制作一個表格，顯示班級的學生信息。
要求：
1. 鼠標移到不同行上時背景色改為色值為 #f2f2f2，移開鼠標時則恢復為原背景色 #fff
2. 點擊添加按鈕，能動態(tài)在最后添加一行
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(){Highlight();} function addOne(obj){ var tbody = document.getElementById('table').lastChild; var tr = document.createElement('tr'); var td = document.createElement("td");td.innerHTML = "<input type='text'/>";tr.appendChild(td);td = document.createElement("td"); td.innerHTML = "<input type='text'/>";tr.appendChild(td);td = document.createElement("td"); td.innerHTML = "<a href='javascript:;' οnclick='deleteRow(this)'>刪除</a>";tr.appendChild(td); tbody.appendChild(tr); Highlight();}function deleteRow(obj){var tbody = document.getElementById('table').lastChild; var tr = obj.parentNode.parentNode;tbody.removeChild(tr);}function Highlight(){var tbody = document.getElementById('table').lastChild; trs = tbody.getElementsByTagName('tr'); for(var i =1;i<trs.length;i++){trs[i].onmouseover = function(){this.style.backgroundColor ="#f2f2f2";} trs[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="deleteRow(this)">刪除</a></td></tr><tr><td>xh002</td><td>劉小芳</td><td><a href="javascript:;" onclick="deleteRow(this)">刪除</a></td></tr> </table><input type="button" value="添加一行" onclick="addOne()" /></body> </html>?
?
轉(zhuǎn)載于:https://www.cnblogs.com/yjhua/p/4597182.html
總結(jié)
以上是生活随笔為你收集整理的制作一个表格，显示班级的学生信息。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Sprint9
- 下一篇： C#中char[]与string之间的转