js 动态表单

最新推荐文章于 2024-05-13 01:52:35 发布

优降宁

最新推荐文章于 2024-05-13 01:52:35 发布

阅读量534

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/yjnlovepy/article/details/128714970

版权

效果展示

动态表单2

需求分析
表格的奇数行字体为黑色，底色为白色；偶数行字体为白色，底色为黑色；
表格的每一行后有一个删除按钮，点击后会跳出提示弹窗，确认后删除该行的内容，并且删除后上述的颜色规律保持不变：
表格的右上方有一个添加按钮，点击后跳出一个表单弹窗，可以填加新的学生的信息。

原理实现
创造一个表单
点击添加时，创建一个tr，tr的内容是td和button的内容
点击删除，删除this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        table{
            height: 700px;
            width: 800px;
        }
        table tr:nth-child(2n-1){
            background-color: white;
        }
        table tr:nth-child(2n){
            background-color: black;
        }

        table tr{
            display: block;
            height: 100px;
        }
        table tr td{
            height: 100px;
            width: 100px;
            text-align: center;
            line-height: 100px;
        }
        button{
            height: 20px;
            width: 50px;
        }
        input{
            width: 80px;
        }
    </style>
</head>
<body>
    
    <table border="1" cellpadding="10" class="box">
        <tr>
            <td> 学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>二级学院</td>
            <td>班级</td>
            <td>专业</td>
            <td>辅导员</td>
            <td><button class="adt">添加行</button></td>
        </tr>
    
    </table>
    <script>
        var table=document.querySelector('.box')
        function del(obj){
            var tr=obj.parentNode.parentNode;
            var table= tr.parentNode;
            table.removeChild(tr);
        }
        var addtr=document.querySelector('.adt');
        addtr.onclick=function(){
            var tr=document.createElement('tr')
            tr.innerHTML="<td><input type='text'></td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td><td><button onclick='del(this)'>删除行</button></td>"
            table.appendChild(tr)
        }
    </script>
</body>
</html>