JavaScript自动增减表格行

2022-01-19 04:26:39

最近正在自学JavaScript，在当今互联网这样一个富客户端时代,个人感觉如果走Web开发前端技术必须要有所了解！！！

-----------------------------------------------------------------------------------------------------------------------------------------

1.下面是自己闲来无事,并且把最近学习到的一些知识做的一个小小的东西，本来不想拿出来晒(还是觉得太简单了的缘故)！但是有时候想想,虽说自己还是个菜鸟,

但是还是得鼓足勇气迈出第一步,向园区的大牛们一步步接近！希望大牛们看到后不喜勿喷！！！！

2.程序所用技术：

2.1使用insertRow(),insertCell(),deleteRow()等函数实现表格行列的增减;

2.2通过oTable.rows.length这样的特性获取当前表格的行数,从而使用for()循环来自动实现表格操作

2.3在单元格中使用appendChild()方法添加内容

2.4使用createElement()方法创建节点元素

3.程序思路：

3.1点击页面链接--->页面弹出输入框

3.2输入数字,点击确定--->程序通过判断,生成相应数量的行

4.HTML页面源码

<html>
    <head>
        <meta charset="utf-8">
        <title>动态生成表格</title>
        <script type="text/javascript" src="js/quick.js"></script>
    </head>
    <body onload="Test()">
        <a id="clickId">点击我</a>
        <table id="tableId" border="1">

        </table>
    </body>
</html>

HTML页面源码

5.JS源码

function Test() {
    /**
     * @todo 获取按钮对象
     */
    var oButton = document.getElementById("clickId");

    /**
     * @todo 以DOM标准为按钮添加事件处理函数
     */
    oButton.addEventListener("click", createTable, false);
};

function createTable() {
    var strNum = prompt("请输入要生成的空白行数","");
    if(strNum === "" || strNum === undefined) {
        return;
    }

    /**
     * 获取table元素
     */
    var oTable = document.getElementById("tableId");

    //获取当前表的行数
    var iCurr_str = oTable.rows.length;
    
    /**
      * @todo 根据输入的数字动态生成相应的空白行数
    */
    if(iCurr_str > 2 && (parseInt(strNum) - (iCurr_str - 2)) > 0) {
        oTable.deleteRow(iCurr_str-1);
        /**
         * @todo 在原基础上增加行
         */
        for(var i=(iCurr_str-2), trLength=parseInt(strNum); i<trLength; i++) {
            /**
               * @todo 创建一个input元素,并且为其添加特性
             */
            var oInput = document.createElement("input");
            oInput.type = "text";
            //插入第i+1行
            oTable.insertRow(i);
            //插入第i+1行的第0列
            oTable.rows[i].insertCell(0);
            //在第0列插入oInput
            oTable.rows[i].cells[0].appendChild(oInput);

            /**
             * @todo 创建<select>元素
             */
            var oSelect = document.createElement("select");
           /**
             * 创建<option>元素,并且为其设值
             */
            var oPtion1 = document.createElement("option");
            oPtion1.appendChild(document.createTextNode("江西"));

            var oPtion2 = document.createElement("option");
            oPtion2.appendChild(document.createTextNode("湖南"));

            /**
             * @todo 将option元素加入到select元素中
             */
            oSelect.appendChild(oPtion1);
            oSelect.appendChild(oPtion2);

            //插入第2列
            oTable.rows[i].insertCell(1);
            oTable.rows[i].cells[1].appendChild(oSelect);
        }
    } else if(iCurr_str > 2 && (parseInt(strNum) - (iCurr_str - 2)) < 0) {
        /**
         * @todo 在原基础上删除行
         */
        oTable.deleteRow(iCurr_str-1);
        for(var i=(iCurr_str-2), delLength=parseInt(strNum); i>delLength; i--) {
            oTable.deleteRow(i);
        }
        if(oTable.rows.length === 1) {
            oTable.deleteRow(0);
            return;
        }
    } else if(iCurr_str === 0) {
        /**
           * 创建表头
         */
        oTable.insertRow(0);
        oTable.rows[0].insertCell(0);
        oTable.rows[0].cells[0].appendChild(document.createTextNode("姓名"));

        oTable.rows[0].insertCell(1);
        oTable.rows[0].cells[1].appendChild(document.createTextNode("籍贯"));    
        for(var i=1, trLength=parseInt(strNum); i<=trLength; i++) {
            /**
               * @todo 创建一个input元素,并且为其添加特性
             */
            var oInput = document.createElement("input");
            oInput.type = "text";
            //插入第i+1行
            oTable.insertRow(i);
            //插入第i+1行的第0列
            oTable.rows[i].insertCell(0);
            //在第0列插入oInput
            oTable.rows[i].cells[0].appendChild(oInput);

            /**
             * @todo 创建<select>元素
             */
            var oSelect = document.createElement("select");
           /**
             * 创建<option>元素,并且为其设值
             */
            var oPtion1 = document.createElement("option");
            oPtion1.appendChild(document.createTextNode("江西"));

            var oPtion2 = document.createElement("option");
            oPtion2.appendChild(document.createTextNode("湖南"));

            /**
             * @todo 将option元素加入到select元素中
             */
            oSelect.appendChild(oPtion1);
            oSelect.appendChild(oPtion2);

            //插入第2列
            oTable.rows[i].insertCell(1);
            oTable.rows[i].cells[1].appendChild(oSelect);
        }
    } else {
        return;
    }

    //计算当前行数
    var trSize = oTable.rows.length;
    /**
     * @todo 创建一个按钮
     */
    var oSubmit = document.createElement("input");
    oSubmit.id = "submitId";
    oSubmit.type = "button";
    oSubmit.value = "提交";
    /**
     * @todo 在最后一行加入一个按钮
     */
    oTable.insertRow(trSize);
    //合并两列
    oTable.rows[trSize].colspan = "2";
    oTable.rows[trSize].insertCell(0);
    oTable.rows[trSize].cells[0].appendChild(oSubmit);

    /**
     * @todo 将表格加入到DOM文档上,并且显示出来
     */
    document.body.appendChild(oTable);
};

JS源码

-----------------------------------------------------------------------------------------------------------------------------------------

后记：学习需要总结与交流！！坚持不懈，每天进步一点点！！

JavaScript自动增减表格行

码农公寓

相关文章