js实现动态表格

目标：创建动态表格，表格行数为奇数时为白底黑字，偶数时为黑底白字

初始显示学号为1~10同学的信息，有删除添加按钮

css

---

<style>
        #tab{
            border: 1px solid black;
            margin:0 auto;
            border-collapse: collapse;
        }
        .bor{
            border: 1px solid black;
            width: 120px;
            height: 30px;
            text-align: center;
            vertical-align: center;
        }
        .a{
            border: none;
        }
        #btnth{
            float: left;
            width: 60px;
        }
        #btnc{
            padding-top: 7.5px;
        }
        #btn1{
            position: fixed;
            right: 16.5%;
            font-size: 19px;
        }
    </style>

---

1.首先我们要先写出初始内容

<button id="btn1">添加</button>
    <table id="tab">
        <tr>
            <th class="bor">学号</th>
            <th class="bor">姓名</th>
            <th class="bor">性别</th>
            <th class="bor">二级学院</th>
            <th class="bor">班级</th>
            <th class="bor">专业</th>
            <th class="bor">辅导员</th>
            <th class="bor">删除信息</th>
        </tr>
        <tr class="ab">
            <th class="bor">01</th>
            <th class="bor">小明</th>
            <th class="bor">男</th>
            <th class="bor">计算机学院</th>
            <th class="bor">5班</th>
            <th class="bor">软件工程</th>
            <th class="bor">余华</th>
            <th class="bor"><button>删除信息</button></th>
        </tr>
        <tr class="ab">
            <th class="bor">02</th>
            <th class="bor">小李</th>
            <th class="bor">男</th>
            <th class="bor">计算机学院</th>
            <th class="bor">5班</th>
            <th class="bor">软件工程</th>
            <th class="bor">余华</th>
            <th class="bor"><button>删除信息</button></th>
        </tr>
        <tr class="ab">
            <th class="bor">03</th>
            <th class="bor">小吴</th>
            <th class="bor">男</th>
            <th class="bor">计算机学院</th>
            <th class="bor">5班</th>
            <th class="bor">软件工程</th>
            <th class="bor">余华</th>
            <th class="bor"><button>删除信息</button></th>
        </tr>
        <tr class="ab">
            <th class="bor">04</th>
            <th class="bor">小羡</th>
            <th class="bor">女</th>
            <th class="bor">计算机学院</th>
            <th class="bor">5班</th>
            <th class="bor">软件工程</th>
            <th class="bor">余华</th>
            <th class="bor"><button>删除信息</button></th>
        </tr>
        <tr class="ab">
            <th class="bor">05</th>
            <th class="bor">许太平</th>
            <th class="bor">男</th>
            <th class="bor">太学院</th>
            <th class="bor">5班</th>
            <th class="bor">儒道</th>
            <th class="bor">李九</th>
            <th class="bor"><button>删除信息</button></th>
        </tr>
        <tr class="ab">
            <th class="bor">06</th>
            <th class="bor">陈平安</th>
            <th class="bor">男</th>
            <th class="bor">计算机学院</th>
            <th class="bor">5班</th>
            <th class="bor">软件工程</th>
            <th class="bor">余华</th>
            <th class="bor"><button>删除信息</button></th>
        </tr>
        <tr class="ab">
            <th class="bor">07</th>
            <th class="bor">陈雯</th>
            <th class="bor">女</th>
            <th class="bor">计算机学院</th>
            <th class="bor">5班</th>
            <th class="bor">软件工程</th>
            <th class="bor">余华</th>
            <th class="bor"><button>删除信息</button></th>
        </tr>
        <tr class="ab">
            <th class="bor">08</th>
            <th class="bor">周禄文</th>
            <th class="bor">男</th>
            <th class="bor">计算机学院</th>
            <th class="bor">5班</th>
            <th class="bor">软件工程</th>
            <th class="bor">余华</th>
            <th class="bor"><button>删除信息</button></th>
        </tr>
        <tr class="ab">
            <th class="bor">09</th>
            <th class="bor">杨忠明</th>
            <th class="bor">男</th>
            <th class="bor">计算机学院</th>
            <th class="bor">5班</th>
            <th class="bor">软件工程</th>
            <th class="bor">余华</th>
            <th class="bor"><button>删除信息</button></th>
        </tr>
        <tr class="ab">
            <th class="bor">10</th>
            <th class="bor">颜齐</th>
            <th class="bor">男</th>
            <th class="bor">计算机学院</th>
            <th class="bor">5班</th>
            <th class="bor">软件工程</th>
            <th class="bor">余华</th>
            <th class="bor"><button>删除信息</button></th>
        </tr>
    </table>

---

2.然后我们就需要完成我们的添加与删除了

我利用了prompt这个较简单的方法获取用户想添加的新信息

然后在table中加入整个单元信息

3.然后我们需要一个行样式函数，每次更改都引用一次该函数，所以我们只需要将其与两个按钮绑定即可

<script>
        var color = [],nummber=9
        var appendit = document.createElement("td")
        appendit.className = "bor"
        var butt = document.createElement("button")
        btn1.onclick = function(){
            var name = window.prompt("请输入名字")
            var xh = window.prompt("请输入学号")
            var xb = window.prompt("请输入性别")
            var ejxy = window.prompt("请输入二级学院")
            var bj = window.prompt("请输入班级")
            var zy = window.prompt("请输入专业")
            var fdy = window.prompt("请输入辅导员")
            var appendit = document.createElement("td")
            appendit.className = "bor"
            var butt = document.createElement("button")
            tab.innerHTML += `<tr class="ab">
            <th class="bor">${name}</th>
            <th class="bor">${xh}</th>
            <th class="bor">${xb}</th>
            <th class="bor">${ejxy}</th>
            <th class="bor">${bj}</th>
            <th class="bor">${zy}</th>
            <th class="bor">${fdy}</th>
            <th class="bor"><button>删除信息</button></th>
        </tr>`
            nummber++
            d = document.querySelectorAll(".ab button")
            for(var i=0;i<=nummber;i++){
            d[i].onclick = hanlder
        }
        colorits()  /*颜色初始化*/
        }
        var d = document.querySelectorAll(".ab button")
        for(var i=0;i<=nummber;i++){
            d[i].onclick = hanlder
        }
        function hanlder(){
            var choose = confirm("确定要删除吗?")
            if(choose==true){
            var it1 = this.parentNode
            var it2 = it1.parentNode
            it2.remove()
            nummber--
            colorits()}
       }
       function colorits(){  /*颜色函数*/
        var colorit = document.querySelectorAll(".ab")
        for(var i = 0;i<nummber+1;i++){
            if(i%2!=0){
                colorit[i].style.background = "black"
                colorit[i].style.color = "white"
            }else{
                colorit[i].style.background = "white"
                colorit[i].style.color = "black"
            }
        }
       }
       colorits()
    </script>

---

完整效果如下: