营销型网站建设团队,江门seo网站推广,app网站维护,和嗲囡囡和做的网站编程练习 制作一个表格#xff0c;显示班级的学生信息。 要求#xff1a; 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2#xff0c;移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮#xff0c;能动态在最后添加一行 3. 点击删除按钮#xff0c;则删除当前行 我的解答…编程练习 制作一个表格显示班级的学生信息。 要求 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮能动态在最后添加一行 3. 点击删除按钮则删除当前行 我的解答 !DOCTYPE html
html
headtitle new document /titlemeta http-equivContent-Type contenttext/html; charsetgbk/script typetext/javascriptwindow.onload function () {var tr document.getElementsByTagName(tr);for(var i0;itr.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(xh00num);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;itr.length;i) {changebgc(tr[i]);}}// 创建删除函数function remove(obj) {var tr obj.parentNode.parentNode;tr.parentNode.removeChild(tr);}/script
/head
body
table border1 width50% idtabletrth学号/thth姓名/thth操作/th/trtrtdxh001/tdtd王小明/tdtda hrefjavascript:; οnclickremove(this)删除/a/td !--在删除按钮上添加点击事件 --/trtrtdxh002/tdtd刘小芳/tdtda hrefjavascript:; οnclickremove(this) 删除/a/td !--在删除按钮上添加点击事件 --/tr/table
input typebutton value添加一行 οnclickadd() / !--在添加按钮上添加点击事件 --
/body
/html 转载于:https://www.cnblogs.com/sunxirui00/p/7504468.html
