如何拉下对手网站,十种人不适合做管理者,北京建设工程造价管理协会网站,如何在网站后台删除栏目题目#xff1a; 要求#xff1a; 1.表格由专业班级学号1-10号同学的信息组成#xff0c;包括#xff1a;学号、姓 名、性别、二级学院、班级、专业、辅导员#xff1b; 2.表格的奇数行字体为黑色#xff0c;底色为白色#xff1b;偶数行字体为白色#xff0c;底 色为黑…题目 要求 1.表格由专业班级学号1-10号同学的信息组成包括学号、姓 名、性别、二级学院、班级、专业、辅导员 2.表格的奇数行字体为黑色底色为白色偶数行字体为白色底 色为黑色 3.表格的每一行后有一个删除按钮点击后会跳出提示弹窗确认后删除该行的内容并且删除后上述的颜色规律保持不变 4.表格的右上方有一个添加按钮点击后跳出一个表单弹窗可以填加新的学生的信息。
要点原理
通过.value获取表单内容再用innerHTML和添加节点新增到表单上。通过获取删除按钮绑定事件进行remove删除节点不要忘记把新增的内容也获取过来
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{margin: 0;padding: 0;}/* a{color: rgb(247, 4, 4);display: inline-block;} */table {border-collapse: collapse;width: 800px;margin: 0 auto;border-spacing: 20px;text-align: center;padding: 10px;}.add {cursor: pointer;}a {color: pink;display: inline-block;}tbody tr:nth-child(odd) {background-color: black;color: white;}tbody tr:nth-child(even) {background-color: white;color: black;}thead tr:nth-child(1) {background-color: greenyellow;color: black;}tr {height: 40px;}.popup {display: none;background-color: whitesmoke;border-radius: 10px;width: 300px;height: 350px;position: absolute;top: 0px;left: 40%;}/style
/head
bodytable border1theadtrth学号/thth姓名/thth性别/thth二级学院/thth班级/thth专业/thth辅导员/thth classadda href#添加/a/th/tr/theadtbodytrtd24250101/tdtd小蓝/tdtd女/tdtd计算机专业/tdtd一班/tdtd物联网专业/tdtd魔仙女王/td tda href# classdel删除/a/td/trtrtd24250102/tdtd游乐王子/tdtd男/tdtd计算机专业/tdtd三班/tdtd软件工程/tdtd魔仙女王/td tda href# classdel删除/a/td/trtrtd24250103/tdtd玲珑/tdtd女/tdtd计算机专业/tdtd二班/tdtd软件工程/tdtd魔仙女王/td tda href# classdel删除/a/td/trtrtd24250104/tdtd严莉莉/tdtd女/tdtd计算机专业/tdtd三班/tdtd软件工程/tdtd魔仙女王/td tda href# classdel删除/a/td/trtrtd24250105/tdtd美琪/tdtd女/tdtd计算机专业/tdtd三班/tdtd物联网工程/tdtd魔仙女王/td tda href# classdel删除/a/td/trtrtd24250106/tdtd美雪/tdtd女/tdtd计算机专业/tdtd三班/tdtd物联网工程/tdtd魔仙女王/td tda href# classdel删除/a/td/trtrtd24250107/tdtd小月/tdtd女/tdtd计算机专业/tdtd三班/tdtd软件工程/tdtd魔仙女王/td tda href# classdel删除/a/td/trtrtd24250108/tdtd石小龙/tdtd男/tdtd计算机专业/tdtd三班/tdtd软件工程/tdtd学校老师/td tda href# classdel删除/a/td/trtrtd24250109/tdtd方珍妮/tdtd女/tdtd计算机专业/tdtd三班/tdtd软件工程/tdtd学校老师/td tda href# classdel删除/a/td/trtrtd24250110/tdtd魔仙小千/tdtd女/tdtd计算机专业/tdtd三班/tdtd软件工程/tdtd魔仙女王/td tda href# classdel删除/a/td/tr/tbody/table!-- 添加表单弹出框 --div classpopup idaddPopupdiv classpopup-content!-- span classclose idcloseAddPopuptimes;/span --form idaddFormlabel forstudentId学号:/labelinput typetext idstudentId namestudentIdbrbrlabel forname姓名:/labelinput typetext idname namenamebrbrlabel forgender性别:/labelselect idgender namegenderoption value男男/optionoption value女女/option/selectbrbrlabel forcollege二级学院:/labelinput typetext idcollege namecollegebrbrlabel forclass班级:/labelinput typetext idclass nameclassbrbrlabel formajor专业:/labelinput typetext idmajor namemajorbrbrlabel forcounselor辅导员:/labelinput typetext idcounselor namecounselorbrbrinput typesubmit value提交 classok/form/div/div
/bodyscriptconst add document.querySelector(.add)const popUp document.querySelector(.popup)const addForm document.querySelector(#addForm)add.addEventListener(click,function() {popUp.style.display block;})addForm.addEventListener(submit,function(e) {e.preventDefault()const studentId document.querySelector(#studentId).valueconst name document.querySelector(#name).valueconst gender document.querySelector(#gender).valueconst college document.querySelector(#college).valueconst Class document.querySelector(#class).valueconst major document.querySelector(#major).valueconst counselor document.querySelector(#counselor).valueconst tableBody document.querySelector(tbody)const newText document.createElement(tr)newText.innerHTML td${studentId}/tdtd${name}/tdtd${gender}/tdtd${college}/tdtd${Class}/tdtd${major}/tdtd${counselor}/tdtda href# classdel删除/a/tdpopUp.style.display none;tableBody.appendChild(newText)const dels document.querySelectorAll(.del)dels.forEach(function(button){button.addEventListener(click,function(e) {e.preventDefault()if(confirm(你确定要删除吗)) {let All this.parentNode.parentNodeAll.parentNode.removeChild(All)}})})})/script
/html视频演示 动态表格
