寒假集训D15 Demo 动态表格

最新推荐文章于 2024-11-10 17:30:00 发布

码上奉先

最新推荐文章于 2024-11-10 17:30:00 发布

阅读量66

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/intmain404/article/details/128721048

版权

题目需求：

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

演示：

动态表格

body部分：

<body>
    <input type="button" class="add bta" value="添加">
    <table id="tab">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>二级学院</th>
            <th>班级</th>
            <th>专业</th>
            <th>辅导员</th>
            <th></th>
        </tr>
        <tr>
            <td>22230401</td>
            <td>赵XX</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>222304</td>
            <td>软件工程</td>
            <td>超超~</td>
            <td><input type="button" onclick="deleteRow(this)" value="删除" class="del"></button></td>
        </tr>
        <tr>
            <td>22230402</td>
            <td>钱X</td>
            <td>女</td>
            <td>计算机工程学院</td>
            <td>222304</td>
            <td>软件工程</td>
            <td>超超~</td>
            <td><input type="button" onclick="deleteRow(this)" value="删除" class="del"></button></td>
        </tr>
        <tr>
            <td>22230403</td>
            <td>孙XX</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>222304</td>
            <td>软件工程</td>
            <td>超超~</td>
            <td><input type="button" onclick="deleteRow(this)" value="删除" class="del"></button></td>
        </tr>
        <tr>
            <td>22230404</td>
            <td>李X</td>
            <td>女</td>
            <td>计算机工程学院</td>
            <td>222304</td>
            <td>软件工程</td>
            <td>超超~</td>
            <td><input type="button" onclick="deleteRow(this)" value="删除" class="del"></button></td>
        </tr>
        <tr>
            <td>22230405</td>
            <td>周XX</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>222304</td>
            <td>软件工程</td>
            <td>超超~</td>
            <td><input type="button" onclick="deleteRow(this)" value="删除" class="del"></button></td>
        </tr>
        <tr>
            <td>22230406</td>
            <td>吴X</td>
            <td>女</td>
            <td>计算机工程学院</td>
            <td>222304</td>
            <td>软件工程</td>
            <td>超超~</td>
            <td><input type="button" onclick="deleteRow(this)" value="删除" class="del"></button></td>
        </tr>
        <tr>
            <td>22230407</td>
            <td>郑XX</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>222304</td>
            <td>软件工程</td>
            <td>超超~</td>
            <td><input type="button" onclick="deleteRow(this)" value="删除" class="del"></button></td>
        </tr>
        <tr>
            <td>22230408</td>
            <td>王X</td>
            <td>女</td>
            <td>计算机工程学院</td>
            <td>222304</td>
            <td>软件工程</td>
            <td>超超~</td>
            <td><input type="button" onclick="deleteRow(this)" value="删除" class="del"></button></td>
        </tr>
        <tr>
            <td>22230409</td>
            <td>冯XX</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>222304</td>
            <td>软件工程</td>
            <td>超超~</td>
            <td><input type="button" onclick="deleteRow(this)" value="删除" class="del"></button></td>
        </tr>
        <tr>
            <td>22230410</td>
            <td>陈X</td>
            <td>女</td>
            <td>计算机工程学院</td>
            <td>222304</td>
            <td>软件工程</td>
            <td>超超~</td>
            <td><input type="button" onclick="deleteRow(this)" value="删除" class="del"></button></td>
        </tr>
    </table>

css部分：

<style>
        *{
            margin: 0;
            padding: 0;
            margin: 0 auto;
        }
        .add{
            width: 40px;
            position: fixed;
            top: 157px;
            right: 505px;
            cursor: pointer;
        }
        table{
            margin-top: 150px;
            border: 1px solid black;
        }
        tr td{
            font-size: 15px;
            width: 120px;
            height: 30px;
            text-align: center;
            border: 1px solid black;
        }
        tr th{
            height: 26px;
            border: 1px solid red;
        }
        tr{
            background-color: black;
            color: white;
        }
        tr:nth-of-type(1){
            background-color: white;
            color: black;
        }
        tr:nth-of-type(2n){ 
            background-color: white;
            color: black;
        }
        .alert{
            display: none;
            width: 230px;
            height: 240px;
            position: fixed;
            top: 220px;
            right: 150px;
            border: 1px solid black;
            border-radius: 20px;
            background-color: cyan;
        }
        .title-alert{
            display: flex;
            height: 30px;
            margin: 5px 0 0 10px;
            text-align: center;
        }
        .close{
            width: 10px;
            height: 10px;
            margin: 0;
            cursor: pointer;
        }
        .content-alert{
            height: auto;
            margin: 5px 50px 5px 10px;
            position: absolute;
            justify-content: center;
        }
        .del{
            width: 40px;
            text-align: center;
            cursor: pointer;
        }
        .new{
            width: 100px;
            outline: none;
        }
        .fin{
            width: 80px;
            height: 30px;
            margin-top: 5px;
            margin-left: 65px;
        }
    </style>

JavaScript部分：

<script>
        //设置删除样式
        function deleteRow(r){
            alert("确认删除该内容?!")
        
            var i = r.parentNode.parentNode.rowIndex;
            document.getElementById('tab').deleteRow(i)
            
        }
        //设置新界面弹出窗口
        let obtn=document.querySelector('.bta')
                //获得弹窗
                let alertEl=document.querySelector('.alert')
                obtn.onclick=function(){
                    alertEl.style.display='block'
                }
                //获得关闭按钮
                let btnClose=document.querySelector('.close')
                btnClose.onclick=function(){
                    alertEl.style.display='none'
                }
                alertEl.onclick=function(e){
                    console.log(e)
                    if(e.target==alertEl){
                        alertEl.style.display='none'
                    }
                    
                }
        var btn = document.getElementById('btn')
        btn.onclick=function(){
            //设置新内容获取
            var numb =document.getElementById('numb')
            var nam =document.getElementById('nam')
            var single =document.getElementById('single')
            var school =document.getElementById('school')
            var cla =document.getElementById('cla')
            var egn =document.getElementById('egn')
            var tea =document.getElementById('tea')
        
            var tab=document.getElementById('tab')
        
            var newtr=document.createElement('tr')
            tab.appendChild(newtr)
        
            var td1=document.createElement('td')
            var td2=document.createElement('td')
            var td3=document.createElement('td')
            var td4=document.createElement('td')
            var td5=document.createElement('td')
            var td6=document.createElement('td')
            var td7=document.createElement('td')
            var td8=document.createElement('td')
        
            //输出新内容
            td1.innerHTML=numb.value
            td2.innerHTML=nam.value
            td3.innerHTML=single.value
            td4.innerHTML=school.value
            td5.innerHTML=cla.value
            td6.innerHTML=egn.value
            td7.innerHTML=tea.value
            td8.innerHTML='<input type="button" οnclick="deleteRow(this)" value="删除" class="del">'
        
            //填充    
            newtr.appendChild(td1)
            newtr.appendChild(td2)
            newtr.appendChild(td3)
            newtr.appendChild(td4)
            newtr.appendChild(td5)
            newtr.appendChild(td6)
            newtr.appendChild(td7)
            newtr.appendChild(td8)
        
        }
    </script>