JavaScript之表格操作创建表格病填充表格数据

Posted 2020-10-03 千千寰宇

//创建表格
    var tableOptions = {
        way: "insertBefore", //insertBefore,append
        positionId: "domTest", //定位元素节点的ID
        tableId: "my-table",
        rows: 2,
        cols: 8,
        data: [
            [‘四川‘, ‘宁夏‘, ‘西藏‘, ‘北京‘, ‘上海‘, ‘台湾‘, ‘福建‘, ‘河北‘],
            [‘陕西‘, ‘天津‘, ‘山东‘, ‘江苏‘, ‘湖北‘, ‘广东‘, ‘湖南‘, ‘江西‘]
        ], //二维数组
        border: 1,
        textAlign: ‘center‘,
        fontFamily: "华文细黑",
    };

    function createTable(tableOptions) {

        /******************************************************************/
        //检验参数合法性
        var check = function() {
            if ( /*arguments.length != 1 || */ (typeof(arguments) != ‘object‘)) {
                //console.log(‘test arguments ‘ + arguments);
                //console.log(‘test tableOptions ‘ + tableOptions.cols);    
                console.log("arguments.length " + arguments.length);
                console.log("typeof(arguments) " + typeof(arguments));
                throw new Error("参数不合法!");
            }

            //检查data与rows,cols的一致性
            if (tableOptions.data) { //如果data不为空
                if (tableOptions.data[0].length != tableOptions.cols) { //列不同
                    throw new Error("data的列数与cols不一致！");
                }
                if (tableOptions.data.length != tableOptions.rows) { //行不同
                    throw new Error("data的行数与rows不一致！");
                }
            }
        };

        //初始化table
        var initTable = function() {
            table = document.createElement("table"); //创建table

            //配置table初始化样式
            table.id = tableOptions.tableId || "table";
            table.border = tableOptions.border || 1;
            table.width = "100%";
            table.style.textAlign = tableOptions.textAlign || "center";
            table.style.fontFamily = tableOptions.fontFamily || "华文细黑";

            //创建tbody
            tbody = document.createElement("tbody");
            table.appendChild(tbody);
        }

        //创建表格并初始化表格内容
        var createTableContents = function(tbody, data, positionId, way) {
            //将data的元素逆置
            // data.sort( function(a,b){ return a - b; });
            for(var k = 0; k < data.length; k++){
                data[k].reverse();
            }

            for (var i = 0; i < data.length; i++) {
                tbody.insertRow(i); //创建行并插入i行
                for (var j = 0; j < data[i].length; j++) {
                    tbody.rows[i].insertCell(j); //插入在i行j列
                    tbody.rows[i].cells[j].insertBefore(document.createTextNode(data[i][j]),null);
                    // tbody.rows[i].cells[j].appendChild(document.createTextNode("Cell " +　i + " , " + j));//方法2
                }
            }

            //插入文档节点中
            var positionElement = document.getElementById(positionId);

            if((way == "append") || (way == null)){
                console.log(‘test:insert way: append‘);
                positionElement.appendChild(table);
            }
            else if(way == "insertBefore"){
                console.log(‘test:insert way: insertBefore‘);
                positionElement.insertBefore(table,null);
            }
            /*注释：
                1.null：插入成为最后一个节点
                2.node.first：插入成为第一个节点
                3.node.last：插入到最后一个节点前面
            */
        };
        /***************************************************************/

        check();

        var table = null;
        var tbody = null;
        initTable();

        createTableContents(tbody, tableOptions.data,tableOptions.positionId,tableOptions.way);
    }