当前位置：首页 > news >正文

手机网站建设推广广东seo推广方案

news 2026/4/7 7:44:02

手机网站建设推广,广东seo推广方案,天津做网站推广的网站,个人做网站名称可以随意更改吗题目： 要求： 1.表格由专业班级学号1-10号同学的信息组成，包括：学号、姓名、性别、二级学院、班级、专业、辅导员； 2.表格的奇数行字体为黑色，底色为白色；偶数行字体为白色，底色为黑…

题目：
要求：
1.表格由专业班级学号1-10号同学的信息组成，包括：学号、姓名、性别、二级学院、班级、专业、辅导员；
2.表格的奇数行字体为黑色，底色为白色；偶数行字体为白色，底色为黑色；
3.表格的每一行后有一个删除按钮，点击后会跳出提示弹窗，确认后删除该行的内容，并且删除后上述的颜色规律保持不变：
4.表格的右上方有一个添加按钮，点击后跳出一个表单弹窗，可以填加新的学生的信息。

要点：（原理）

通过.value获取表单内容，再用innerHTML和添加节点，新增到表单上。
通过获取删除按钮，绑定事件，进行remove删除节点，不要忘记把新增的内容也获取过来

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{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>
<body><table border="1"><thead><tr><th>学号</th><th>姓名</th><th>性别</th><th>二级学院</th><th>班级</th><th>专业</th><th>辅导员</th><th class="add"><a href="#">添加</a></th></tr></thead><tbody><tr><td>24250101</td><td>小蓝</td><td>女</td><td>计算机专业</td><td>一班</td><td>物联网专业</td><td>魔仙女王</td>  <td><a href="#" class="del">删除</a></td></tr><tr><td>24250102</td><td>游乐王子</td><td>男</td><td>计算机专业</td><td>三班</td><td>软件工程</td><td>魔仙女王</td>  <td><a href="#" class="del">删除</a></td></tr><tr><td>24250103</td><td>玲珑</td><td>女</td><td>计算机专业</td><td>二班</td><td>软件工程</td><td>魔仙女王</td>  <td><a href="#" class="del">删除</a></td></tr><tr><td>24250104</td><td>严莉莉</td><td>女</td><td>计算机专业</td><td>三班</td><td>软件工程</td><td>魔仙女王</td>  <td><a href="#" class="del">删除</a></td></tr><tr><td>24250105</td><td>美琪</td><td>女</td><td>计算机专业</td><td>三班</td><td>物联网工程</td><td>魔仙女王</td>  <td><a href="#" class="del">删除</a></td></tr><tr><td>24250106</td><td>美雪</td><td>女</td><td>计算机专业</td><td>三班</td><td>物联网工程</td><td>魔仙女王</td>  <td><a href="#" class="del">删除</a></td></tr><tr><td>24250107</td><td>小月</td><td>女</td><td>计算机专业</td><td>三班</td><td>软件工程</td><td>魔仙女王</td>  <td><a href="#" class="del">删除</a></td></tr><tr><td>24250108</td><td>石小龙</td><td>男</td><td>计算机专业</td><td>三班</td><td>软件工程</td><td>学校老师</td>  <td><a href="#" class="del">删除</a></td></tr><tr><td>24250109</td><td>方珍妮</td><td>女</td><td>计算机专业</td><td>三班</td><td>软件工程</td><td>学校老师</td>  <td><a href="#" class="del">删除</a></td></tr><tr><td>24250110</td><td>魔仙小千</td><td>女</td><td>计算机专业</td><td>三班</td><td>软件工程</td><td>魔仙女王</td>  <td><a href="#" class="del">删除</a></td></tr></tbody></table><!-- 添加表单弹出框 --><div class="popup" id="addPopup"><div class="popup-content"><!-- <span class="close" id="closeAddPopup">&times;</span> --><form id="addForm"><label for="studentId">学号:</label><input type="text" id="studentId" name="studentId"><br><br><label for="name">姓名:</label><input type="text" id="name" name="name"><br><br><label for="gender">性别:</label><select id="gender" name="gender"><option value="男">男</option><option value="女">女</option></select><br><br><label for="college">二级学院:</label><input type="text" id="college" name="college"><br><br><label for="class">班级:</label><input type="text" id="class" name="class"><br><br><label for="major">专业:</label><input type="text" id="major" name="major"><br><br><label for="counselor">辅导员:</label><input type="text" id="counselor" name="counselor"><br><br><input type="submit" value="提交" class="ok"></form></div></div> 
</body><script>const 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}</td><td>${name}</td><td>${gender}</td><td>${college}</td><td>${Class}</td><td>${major}</td><td>${counselor}</td><td><a href="#" class="del">删除</a></td>`popUp.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>

视频演示：

动态表格

查看全文

http://www.hkea.cn/news/39365/