表格的增加和删除

最新推荐文章于 2021-07-28 07:23:50 发布

xing_cat

最新推荐文章于 2021-07-28 07:23:50 发布

阅读量316

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/qq_37413883/article/details/80497401

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格删除和增加</title>
        <script type="text/javascript">

            var rowNum = 1;
            var colors = ["#FF0000","#00FF00","#0000FF","#FFFF00","#FF00FF","#00FFFF","#ABCDEF","#DEF123"];
            function addRow(){
                //创建三个文本结点
                var txtNode1 = document.createTextNode("单元格内容"+rowNum);
                var txtNode2 = document.createTextNode("单元格内容"+rowNum);
                var txtNode3 = document.createTextNode("单元格内容"+rowNum);

                //创建三个元素结点td
                var tdNode1 = document.createElement("td");
                var tdNode2 = document.createElement("td");
                var tdNode3 = document.createElement("td");

                //将三个文本结点依次添加到元素结点td中
                tdNode1.appendChild(txtNode1);
                tdNode2.appendChild(txtNode2);
                tdNode3.appendChild(txtNode3);

                //创建一个元素结点tr
                var trNode = document.createElement("tr");
                trNode.appendChild(tdNode1);
                trNode.appendChild(tdNode2);
                trNode.appendChild(tdNode3);

                var index = Math.floor(Math.random()*8);
                trNode.style.backgroundColor = colors[index];

                //将trNode添加到table中
                var tableNode = document.getElementById("tb");
                tableNode.appendChild(trNode);

                rowNum++;
            }
            function delRow(){
                var tableNode = document.getElementById("tb");
                tableNode.removeChild(tableNode.lastElementChild);

                rowNum--;
            }
        </script>
    </head>
    <body>
        <input type="button" value="新增一行" onclick="addRow();" />
        <input type="button" value="删除一行" onclick="delRow();" />
        <hr />
        <table id="tb" width="500" border="1">
            <!--
                <tr>
                    <td>单元格内容</td>
                    <td>单元格内容</td>
                    <td>单元格内容</td>
                </tr>   
            -->
        </table>
    </body>
</html>