动态表格制作

需求

html代码

    <table id="tbd">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>二级学院</th>
            <th>班级</th>
            <th>专业</th>
            <th>辅导员</th>
            <th></th>
        </tr>
        <tr>
            <td>22240102</td>
            <td>孙欣彤</td>
            <td>女</td>
            <td>计算机工程学院</td>
            <td>222401</td>
            <td>软件工程（嵌入式培养）</td>
            <td>武则超</td>
            <td><input type="button" onclick="deleteRow(this)" value="删除" ></button></td>
        </tr>
        <tr>
            <td>22240103</td>
            <td>尉榕</td>
            <td>女</td>
            <td>计算机工程学院</td>
            <td>222401</td>
            <td>软件工程（嵌入式培养）</td>
            <td>武则超</td>
            <td><input type="button" onclick="deleteRow(this)" value="删除"></button></td>
        </tr>
        <tr>
            <td>22240104</td>
            <td>叶韵怡</td>
            <td>女</td>
            <td>计算机工程学院</td>
            <td>222401</td>
            <td>软件工程（嵌入式培养）</td>
            <td>武则超</td>
            <td><input type="button" onclick="deleteRow(this)" value="删除"></button></td>
        </tr>
        <tr>
            <td>22240105</td>
            <td>殷瑞欣</td>
            <td>女</td>
            <td>计算机工程学院</td>
            <td>222401</td>
            <td>软件工程（嵌入式培养）</td>
            <td>武则超</td>
            <td><input type="button" onclick="deleteRow(this)" value="删除"></button></td>
        </tr>
        <tr>
            <td>22240106</td>
            <td>尤悠</td>
            <td>女</td>
            <td>计算机工程学院</td>
            <td>222401</td>
            <td>软件工程（嵌入式培养）</td>
            <td>武则超</td>
            <td><input type="button" onclick="deleteRow(this)" value="删除"></button></td>
        </tr>
        <tr>
            <td>22240107</td>
            <td>张玉玲</td>
            <td>女</td>
            <td>计算机工程学院</td>
            <td>222401</td>
            <td>软件工程（嵌入式培养）</td>
            <td>武则超</td>
            <td><input type="button" onclick="deleteRow(this)" value="删除"></button></td>
        </tr>
        <tr>
            <td>22240108</td>
            <td>赵宇婷</td>
            <td>女</td>
            <td>计算机工程学院</td>
            <td>222401</td>
            <td>软件工程（嵌入式培养）</td>
            <td>武则超</td>
            <td><input type="button" onclick="deleteRow(this)" value="删除"></button></td>
        </tr>
        <tr>
            <td>22240109</td>
            <td>毕天乐</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>222401</td>
            <td>软件工程（嵌入式培养）</td>
            <td>武则超</td>
            <td><input type="button" onclick="deleteRow(this)" value="删除"></button></td>
        </tr>
        <tr>
            <td>22240110</td>
            <td>陈柏伦</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>222401</td>
            <td>软件工程（嵌入式培养）</td>
            <td>武则超</td>
            <td><input type="button" onclick="deleteRow(this)" value="删除"></button></td>
        </tr>
        <tr>
            <td>22240111</td>
            <td>方易成</td>
            <td>男</td>
            <td>计算机工程学院</td>
            <td>222401</td>
            <td>软件工程（嵌入式培养）</td>
            <td>武则超</td>
            <td><input type="button" onclick="deleteRow(this)" value="删除"></button></td>
        </tr>
    </table>
    <input type="button" class="btn-alert" value="添加"></input ></input type="button">
    <div class="alert">
        <div class="alert-title">新增名单<div class="close">×</div></div>
        <div class="alert-content">
            学号：<input type="text" id="xuehao">
            姓名：<input type="text" id="xingming">
            性别：<input type="text" id="xingbie">
            二级学院：<input type="text" id="xueyuan">
            班级：<input type="text" id="banji">
            专业：<input type="text" id="zhuanye">
            辅导员<input type="text" id="fudaoyuan">
            <input type="button" id="btn" value="完成"></input>
        </div>
    </div>

css代码

*{
    margin: 0;
    padding: 0;
    margin: 0 auto;
}
table{
    border: 1px solid black;
}
tr td{
    border: 1px solid black;
}
tr th{
    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: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
}
.alert-title{
    display: flex;
    justify-content: space-between;
    height: 30px;
    margin: 0 auto;
    background-color: white;
    text-align: center;
}
.close{
    width: 10px;
    height: 10px;
    margin: 0;
    cursor: pointer;
}
.alert-content{
    height: auto;
    margin: 0 auto;
    background-color: white;
}

JavaScript代码

function deleteRow(r){
    alert("是否要删除")

    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById('tbd').deleteRow(i)
    
}

let obtn=document.querySelector('.btn-alert')
        //获得弹窗
        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 xuehao=document.getElementById('xuehao')
    var xingming=document.getElementById('xingming')
    var xingbie=document.getElementById('xingbie')
    var xueyuan=document.getElementById('xueyuan')
    var banji=document.getElementById('banji')
    var zhuanye=document.getElementById('zhuanye')
    var fudaoyuan=document.getElementById('fudaoyuan')


    var tbd=document.getElementById('tbd')

    var newtr=document.createElement('tr')
    tbd.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=xuehao.value
    td2.innerHTML=xingming.value
    td3.innerHTML=xingbie.value
    td4.innerHTML=xueyuan.value
    td5.innerHTML=banji.value
    td6.innerHTML=zhuanye.value
    td7.innerHTML=fudaoyuan.value
    td8.innerHTML='<input type="button" οnclick="deleteRow(this)" value="删除">'


    
    newtr.appendChild(td1)
    newtr.appendChild(td2)
    newtr.appendChild(td3)
    newtr.appendChild(td4)
    newtr.appendChild(td5)
    newtr.appendChild(td6)
    newtr.appendChild(td7)
    newtr.appendChild(td8)

}

样式截图

实现原理

1. 先制作一个表格，把班级前十个人写进去
2. 设置表格的背景颜色
3. 给删除按键设置一个函数
4. 再设置一个弹窗，就是显示它的display为none，设置一个按钮，点击后转化为block，并且在里面设置几个输入输入框
5. 设置一个点击事件，使输入的数据重新被建立一个表格行