表格的增加和删除

<!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>

这里写图片描述

鲜花会生锈，盐巴会腐烂

相关阅读:
求最小正整数x,A^x=1(mod M)求阶模板
 欧拉函数模板
 高次同余方程模板BabyStep-GiantStep
Pollard-Rho大整数拆分模板
 Miller-Rabin大素数测试模板
 JSON教程基础
 11.@RequestParam @RequestBody @PathVariable 等参数绑定注解详解
 代码格式化
 使用FireFox插件RESTClient、HttpRequester模拟http(get post)请求
 SpringBoot入门最详细教程
原文地址：https://www.cnblogs.com/hunterxing/p/9709297.html