HTML Table 冻结行列

老规矩：先上效果图：

代码实例和其他实例是一起的，稍后分享。

页面

 <div id="reportpan" style="width: 500px;"><table id="CountReport" class=" display table-bordered table-hover" style="overflow-x: scroll; white-space: nowrap; text-align: center !important; color: #000000;" cellspacing="0"></table><div style="text-align: right;"><div id="CallBackPager"></div></div></div>

主要js

ajax返回拼接好的HTML table tr .就是date,

我为什么在后面加“<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>”？？？

因为如果date 最后一行中有合并行，冻结就会出现奇怪的现象。。。

 $("#CountReport").html(date+ "<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"); $("#CountReport tr td ").css("padding", "3");$("#CountReport tr:eq(0)").css("font-size", "14px").css("font-weight", "700");//  $("#CountReport tr:eq(1)").css("font-size", "14px").css("font-weight", "700"); // font-size:14px;font-weight:700var width = $("#reportpan").width;var height = $("#reportpan").height() + 20;FixTable("CountReport", 5, width, height);

function FixTable(TableID, FixColumnNumber, width, height) {debugger;if ($("#" + TableID + "_tableLayout").length != 0) {$("#" + TableID + "_tableLayout").before($("#" + TableID));$("#" + TableID + "_tableLayout").empty();}else {$("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");}$('<div id="' + TableID + '_tableFix"></div>'+ '<div id="' + TableID + '_tableHead"></div>'+ '<div id="' + TableID + '_tableColumn"></div>'+ '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");var oldtable = $("#" + TableID);var tableFixClone = oldtable.clone(true);tableFixClone.attr("id", TableID + "_tableFixClone");$("#" + TableID + "_tableFix").append(tableFixClone);var tableHeadClone = oldtable.clone(true);tableHeadClone.attr("id", TableID + "_tableHeadClone");$("#" + TableID + "_tableHead").append(tableHeadClone);var tableColumnClone = oldtable.clone(true);tableColumnClone.attr("id", TableID + "_tableColumnClone");$("#" + TableID + "_tableColumn").append(tableColumnClone);$("#" + TableID + "_tableData").append(oldtable);$("#" + TableID + "_tableLayout table").each(function () {$(this).css("margin", "0");});var HeadHeight = $("#" + TableID + "_tableHead thead").height();HeadHeight += 2;$("#" + TableID + "_tableHead").css("height", HeadHeight);$("#" + TableID + "_tableFix").css("height", HeadHeight);var ColumnsWidth = 0;var ColumnsNumber = 0;$("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {ColumnsWidth += $(this).outerWidth(true);ColumnsNumber++;});ColumnsWidth += 2;//if ($.browser.msie) { //这里是有关浏览器兼容问题//    switch ($.browser.version) {//        case "7.0"://            if (ColumnsNumber >= 3) ColumnsWidth--;//            break;//        case "8.0"://            if (ColumnsNumber >= 2) ColumnsWidth--;//            break;//    }//}$("#" + TableID + "_tableColumn").css("width", ColumnsWidth);$("#" + TableID + "_tableFix").css("width", ColumnsWidth);$("#" + TableID + "_tableData").scroll(function () {$("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());$("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());});$("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "white" });$("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "white" });$("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "white" });$("#" + TableID + "_tableData").css({ "overflow-x": "scroll", "overflow-y": "hidden", "width": width, "height": height, "position": "relative", "z-index": "35" });if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {$("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());$("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);}if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {$("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());$("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);}$("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());$("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());$("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());$("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());//  if ($("#" + TableID + "_tableData").width() > $("#" + TableID).width()) { //自适应宽//      $("#" + TableID + "_tableData").width($("#" + TableID + "_tableLayout").width());//      $("#" + TableID).width($("#" + TableID + "_tableLayout").width());//  }//  $("#" + TableID + "_tableLayout").height($("#" + TableID + "_tableData").height());//自适应高
}

转载于:https://www.cnblogs.com/LiuFly/p/5076024.html

HTML Table 冻结行列相关推荐

JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案参考文章: (1)JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 (2) ...
html table 转置,jQuery+CSS实现的table表格行列转置功能示例
本文实例讲述了jQuery+CSS实现的table表格行列转置功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: www.ddpool.cn jQuery行列转置 table ...
Java POI 导出Excel，设置单元格无法编辑，开启工作表保护后，依然可以筛选，冻结行列不移动
1. 设置单元格无法编辑 // 单元格样式锁定不可编辑 CellStyle lockStyle = workbook.createCellStyle(); lockStyle.setLocked(t ...
原生html冻结表头,Table冻结表头示例代码
Table冻结表头: function fixupFirstRow(tab) { var div=tab.parentNode; if(div.className.toLowerCase()==&qu ...
html5表格两列合并_详解html中表格table的行列合并问题解决
这篇文章主要介绍了详解html中表格table的行列合并问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧因为要做个网站, ...
html表格table冻结行和列
2019独角兽企业重金招聘Python工程师标准>>> 转自http://liyinlei.iteye.com/blog/2077714 这种固定行列的方式只适用于IE,并且只适用于 ...
antd的table进行列筛选时，更新dataSource，为什么table显示暂无数据？
我想当然地认为只要dataSource改变,那么<Table>组件就会重新渲染, 但是有一种特殊情况例外: 在onFilter()中不写筛选条件,在调用filterDropdown进行列筛 ...
excel冻结窗格－－冻结行列标题
在工作的几年里,越来越发现microsoftware的强大.也开始使用excel来做自己的计划和各种各样的事件记录. 说实话,那么强大的功能我仅仅用到了10%或许都不到呢! 对 ...
JQuery实现table冻结列
由于公司代码框架古老使用静态html画的页面,无法使用bootstrap或easyui实现冻结列最终再github上面找到的冻结列的实现 github地址 https://qiuyaofan.git ...

HTML Table 冻结行列

HTML Table 冻结行列相关推荐

最新文章

热门文章