JS实现表格跨行变色

表格的跨行换色主要用到了JS的函数以及for循环，今天以表格的增加，删除，隔行换色来给大家演示一下。

    <body>
        <div>
            <table border="1px" id="tabled">
                <thead>
                    <tr>
                        <td>序号</td>
                        <td>内容</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>DATA</td>
                        <td><button id="button_One">删除</button></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <button id="button_Two">添加</button>
    </body>

    <script>

        let thead_thead = document.getElementsByTagName('thead')[0];   //获取thead
        let tbody = document.getElementsByTagName('tbody')[0];   //获取tbody
        let but = document.getElementById('button_Two');    //获取'添加'按钮
        let content = 100;     //设定初始内容框为100
          //绑定一个函数
        but.onclick = function() {       
            let thead_tr = thead_thead.getElementsByTagName('tr')[0];   //获取tr
            let thsss = thead_tr.children;         //获取tr中得子元素
            let new_tr = document.createElement('tr');   //新建一个tr
            //利用for循环添加每个单元格得内容
            for (let i = 0; i < thsss.length; i++) {
                let new_td = document.createElement('td');   //新建一个td
                let tbody_tr = tbody.children;       //获取tbody得子元素
                if (i == 0) {
                    new_td.innerHTML = tbody_tr.length + 1;
                }
                if (i == 1) {
                    new_td.innerHTML = content;   //新的td会+100
                    content += 100;             
                }
                if (i == thsss.length - 1) {
                    new_td.innerHTML = '<button>删除</button>'
                }
                new_tr.appendChild(new_td);        //将新建的单元格输入到新的tr中
            }
            tbody.appendChild(new_tr);    //将新建的tr输入到tbody中完成添加
            color();
        }

        function color() {
            let tr_s = tbody.children;    //获取tbody的子元素
            //利用for循环更改序号的值 以及颜色
            for (let i = 0; i < tr_s.length; i++) {
                tr_s[i].children[0].innerHTML = i + 1;
                if (i % 2 == 0) {          //区分单数行和双数行
                    tr_s[i].style.backgroundColor = "";
                } else{
                    tr_s[i].style.backgroundColor = "blue";
                }
            }
        }

        tbody.addEventListener('click', function(sr) {
            sr = sr || window.event; 
            let targetElement = sr.target || sr.srcElement;
            if (targetElement.innerHTML == "删除") {
                let capture = targetElement.parentElement.parentElement;   //获取得到的元素，寻找其父级的父级，在这时指的是tr
                tbody.removeChild(capture);   //进行删除
                color();
            }
        }
        )
</script>

下面是效果：

谢谢大家观看，欢迎评论区讨论。

原文链接: https://blog.csdn.net/hexadecimal_001/article/details/137285549

目录