js 拼接div实现 table 横纵表头固定

 

function createCalculateTable($div) {

    // 初始化清空
    $div.empty();
    // 固定行列值
    var rowLimit = 15;
    var colLimit = 15;

    // 容器变量
    var dataContainer = "";

    /******* 表头绘制开始 *********/
    dataContainer += '<div id="dataHeader">';
    dataContainer += '<div class="leftDiv">';
    dataContainer += '<div class="data-row">';
    dataContainer += '<div class="col"  style="line-height:32px">';
    dataContainer += '<div class="data-row title-div">';
    dataContainer += '<div class="diagonal-div"></div>';
    dataContainer += '<div class="color-title">列头</div>';
    dataContainer += '<div class="size-title">行头</div>';
    dataContainer += '</div>';

    dataContainer += '</div>';
    dataContainer += '</div>';
    dataContainer += '</div>';

    dataContainer += '<div class="centerDiv">';
    dataContainer += '<div class="column-container">';
    dataContainer += '<div class="data-row">';
    // 表头数据格绘制
    for (var i = 0; i < colLimit; i++) {
        dataContainer += '<div class="col">';
        dataContainer += '</div>'
    }
    dataContainer += '</div>'
    dataContainer += '</div>'
    dataContainer += '</div>'

    // 上部表头合计
    dataContainer += '<div class="rightDiv">'
    dataContainer += '<div class="data-row">';
    dataContainer += '<div class="col" style="line-height:32px"> 合计';
    dataContainer += '</div>';
    dataContainer += '</div>';
    dataContainer += '</div>'

    dataContainer += '</div>'

    /******* 表头绘制结束 *********/

    /******* 表体绘制开始 *********/
    // 中间数据
    dataContainer += '<div id="dataBody">'

    // 颜色
    dataContainer += '<div class="leftDiv">';
    for (var i = 0; i < rowLimit; i++) {
        dataContainer += '<div class="data-row">';
        dataContainer += '<div class="col" >';
        dataContainer += '</div>';
        dataContainer += '</div>';
    }
    dataContainer += '</div>';

    // 数据格部分
    dataContainer += '<div class="centerDiv">';
    dataContainer += '<div class="column-container">';
    // 行绘制
    for (var i = 0; i < rowLimit; i++) {
        dataContainer += '<div class="data-row">';
        // 列绘制
        for (var j = 0; j < colLimit; j++) {
            dataContainer += '<div class="col">';
                    
            dataContainer += '</div>'
        }
        dataContainer += '</div>'
    }
    dataContainer += '</div>'
    dataContainer += '</div>'

    // 合计
    dataContainer += '<div class="rightDiv">'
    for (var i = 0; i < rowLimit; i++) {
        dataContainer += '<div class="data-row">';
        dataContainer += '<div class="col">';
        dataContainer += '</div>';
        dataContainer += '</div>';
    }
    dataContainer += '</div>'
    dataContainer += '</div>'
    /******* 表体绘制结束 *********/

    /******* 底部合计绘制开始 *********/

    // 底部合计
    dataContainer += '<div id="dataFooter">'

    // 列合计
    dataContainer += '<div class="leftDiv">';
    dataContainer += '<div class="data-row">';
    dataContainer += '<div class="col"  style="line-height:32px"> 合计';
    dataContainer += '</div>';
    dataContainer += '</div>';
    dataContainer += '</div>';

    // 列合计格绘制
    dataContainer += '<div class="centerDiv">';
    dataContainer += '<div class="column-container">';
    dataContainer += '<div class="data-row">';
    for (var i = 0; i < colLimit; i++) {
        dataContainer += '<div class="col">';
        dataContainer += '</div>'
    }
    dataContainer += '</div>'
    dataContainer += '</div>'
    dataContainer += '</div>'

    // 总合计格
    dataContainer += '<div class="rightDiv">'
    dataContainer += '<div class="data-row">';
    dataContainer += '<div class="col">';
    dataContainer += '</div>';
    dataContainer += '</div>';
    dataContainer += '</div>';

    dataContainer += '</div>';
    /******* 底部合计绘制结束 *********/

    /** *** 绘制横向滚动条start ***** */
    dataContainer += '<div id="scrollContainer">';
    dataContainer += '<div id="scroll">';
    dataContainer += '</div>';
    dataContainer += '</div>';
    /***** 绘制横向滚动条end ******/

    dataContainer += '</div>';
    $div.append(dataContainer);

}