动态表格制作

mttp02

已于 2023-01-18 13:09:01 修改

阅读量376

点赞数

文章标签： javascript 前端 html

于 2023-01-18 12:52:15 首次发布

本文链接：https://blog.csdn.net/m0_74348480/article/details/128725186

版权

动态表格制作

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动态表格</title>
    <style>
        #table5{
            width: 700px;
            text-align: center;
            border-collapse: collapse;
        }
        #table5 td,th{
            border:1px solid;
            height: 30px;
        }

        tbody tr:nth-child(2n){
            background-color:grey;
        } 
        tbody tr:nth-child(2n-1){
            background-color:#fff;
        } 

    </style>
</head>
<body>
    <h3>5、任意增删表格行</h3>
    <!-- 布局 -->
    <input type="button" value="增加表格行" id="add" onclick="add()">
    <input type="button" value="删除表格行" id="dele" onclick="dele()">
    <table id="table5">
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>二级学院</th>
                <th>班级</th>
                <th>专业</th>
                <th>辅导员</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        // 点击按钮增加表格
        var tbodY=document.querySelector('#table5 tbody')
        function add(){
            var tatr=document.createElement('tr')
            var tatd1=document.createElement('td')
            var tatd2=document.createElement('td')
            var tatd3=document.createElement('td')
            var tatd4=document.createElement('td')
            var tatd5=document.createElement('td')
            var tatd6=document.createElement('td')
            var tatd7=document.createElement('td')
            tatr.appendChild(tatd1);
            tatr.appendChild(tatd2);
            tatr.appendChild(tatd3);
            tatr.appendChild(tatd4);
            tatr.appendChild(tatd5);
            tatr.appendChild(tatd6);
            tatr.appendChild(tatd7);
            tbodY.appendChild(tatr);
        }
       

        //点击按钮删除最后一行
        function dele(){
            if(window.confirm('你确定要删除吗？')){  
        tbodY.removeChild(tbodY.lastChild)
            }
        }
    </script>
</body>
</html>