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);}