zoukankan html css js c++ java

表格的增加和删除

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

这里写图片描述

鲜花会生锈，盐巴会腐烂

查看全文

相关阅读:
求s=a+aa+aaa+aaaa+aa...a的值，其中a是一个数字。
getchar函数
 计算机网络04-ip与子网划分
 计算机网络03-传输层、可靠数据传输、UDP与TCP
计算机网络02-应用层（http、email、dns)
游戏-图形学学习路线
 markDown 入门
 webpack 入门级傻瓜式教学
 npm 切换 cnpm 切换淘宝镜像源
 vue 父组件在接收子组件的同时传递一个当前的数据

原文地址：https://www.cnblogs.com/hunterxing/p/9709297.html