动态表格html - 技术栈

题目：

要求：

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>

学号	姓名	性别	二级学院	班级	专业	辅导员	添加
24250101	小蓝	女	计算机专业	一班	物联网专业	魔仙女王	删除
24250102	游乐王子	男	计算机专业	三班	软件工程	魔仙女王	删除
24250103	玲珑	女	计算机专业	二班	软件工程	魔仙女王	删除
24250104	严莉莉	女	计算机专业	三班	软件工程	魔仙女王	删除
24250105	美琪	女	计算机专业	三班	物联网工程	魔仙女王	删除
24250106	美雪	女	计算机专业	三班	物联网工程	魔仙女王	删除
24250107	小月	女	计算机专业	三班	软件工程	魔仙女王	删除
24250108	石小龙	男	计算机专业	三班	软件工程	学校老师	删除
24250109	方珍妮	女	计算机专业	三班	软件工程	学校老师	删除
24250110	魔仙小千	女	计算机专业	三班	软件工程	魔仙女王	删除

</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').value const name = document.querySelector('#name').value const gender = document.querySelector('#gender').value const college = document.querySelector('#college').value const Class = document.querySelector('#class').value const major = document.querySelector('#major').value const counselor = document.querySelector('#counselor').value const tableBody = document.querySelector('tbody') const newText = document.createElement('tr') newText.innerHTML = ` ${studentId} ${name} ${gender} ${college} ${Class} ${major} ${counselor} 删除 ` 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.parentNode All.parentNode.removeChild(All) } }) }) }) </script> </html>

视频演示：

动态表格