JS案例：动态表格_js table可编辑,不符合条件提示样例-优快云博客

本文链接：https://blog.youkuaiyun.com/pe11223/article/details/128720344

需求
1.表格由专业班级学号1-10号同学的信息组成，包括:学号、姓名、性别、二级学院、班级、专业、辅导员:
2.表格的奇数行字体为黑色，底色为白色;偶数行字体为白色，底色为黑色;
3.表格的每一行后有一个删除按钮，点击后会跳出提示弹窗，确认后删除该行的内容，并且删除后上述的颜色规律保持不变:
4.表格的右上方有一个添加按钮，点击后跳出一个表单弹窗，可以填加新的学生的信息
原理
对下面表格获取，然后排序，按奇偶给class名。
添加表格就直接使用innerhtml，然后用弹出框获取值。
代码

<!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;
            text-decoration: none;
        }
        .top{
            height: 150px;
            background-color: black;
            color: white;
            font-size: 50px;
            text-align: center;
            line-height: 150px;
            margin-bottom: 100px;
        }
        .bo{
            width: 1000px;
            margin: 0 auto;
        }
        #tab{
            width: 600px;
            text-align: center;
            border-collapse: collapse;
        }
        #tab th,td{
            border: 1px solid;
            height: 30px;
        }
        #ADD{
            position: absolute;
            top: 180px;
            right: 100px;
            display: block;
            height: 50px;
            width: 100px;
        }
        .a{color: white;background-color: black;}
    </style>
</head>
<body>
    <div class="top">JS动态表格</div>
    <button id="ADD">添加</button>

    <div class="bo">
        <table id="tab">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>二级学院</th>
                    <th>班级</th>
                    <th>专业</th>
                    <th>辅导员</th>
                    <th></th>
                </tr>
            </thead>

            <tbody id="body">
                <tr class="list">
                    <td>1</td>
                    <td>a</td>
                    <td>n</td>
                    <td>ab</td>
                    <td>2</td>
                    <td>jsj</td>
                    <td>wzc</td>
                    <td><a href="#" onclick="dell(this)">删除</a></td>
                </tr>
                <tr class="list">
                    <td>1</td>
                    <td>a</td>
                    <td>n</td>
                    <td>ab</td>
                    <td>2</td>
                    <td>jsj</td>
                    <td>wzc</td>
                    <td><a href="#" onclick="dell(this)">删除</a></td>
                </tr>
                <tr class="list">
                    <td>1</td>
                    <td>a</td>
                    <td>n</td>
                    <td>ab</td>
                    <td>2</td>
                    <td>jsj</td>
                    <td>wzc</td>
                    <td><a href="#" onclick="dell(this)">删除</a></td>
                </tr>
                <tr class="list">
                    <td>5</td>
                    <td>a</td>
                    <td>n</td>
                    <td>ab</td>
                    <td>2</td>
                    <td>jsj</td>
                    <td>wzc</td>
                    <td><a href="#" onclick="dell(this)">删除</a></td>
                </tr>
            </tbody>
        </table>
    </div>
    
    <script>
        var tbody =document.querySelector('#tab tbody')
        var body_list =document.querySelectorAll("#body tr")
        var lists = document.getElementsByClassName("list")
        var ADD = document.getElementById("ADD")

        var namelist = function(){
            for(i=0;i<lists.length;i++){
                if(i%2 != 0){
                    lists[i].className = 'list a'
                }
            }
            console.log(lists.length)
        }
        namelist();
        ADD.onclick = function(){
            var xh = prompt("请输入学号")
            var xm =prompt("请输入姓名")
            var xb = prompt("请输入姓名")
            var ejxy = prompt("请输入二级学院")
            var bj = prompt("请输入班级")
            var zy =prompt("请输入专业")
            var fdy = prompt("请输入辅导员")
            var ADtab = document.getElementsByTagName("tbody")[0];
            ADtab.innerHTML +='<tr class="list">\n'+"<td>"+xh+"</td>"+"<td>"+xm+"</td>"+"<td>"+xb+"</td>"+"<td>"+ejxy+"</td>"+"<td>"+bj+"</td>"+"<td>"+zy+"</td>"+"<td>"+fdy+"</td>"+'<td><a href="#" οnclick="del(this)">删除</a></td>'
            namelist();
        }
       
        function dell(x)
        {   
            if(confirm("确认删除？")){
                var table = x.parentNode.parentNode.parentNode;
	        var tr = x.parentNode.parentNode;
	        table.removeChild(tr);
            }
            namelist();
        }
    </script>
</body>
</html>

效果
请添加图片描述