JQUERY冻结table行或列js

freezeTable.js

/** 锁定表头和列* * 参数定义*   table - 要锁定的表格元素或者表格ID*   freezeRowNum - 要锁定的前几行行数，如果行不锁定，则设置为0*   freezeColumnNum - 要锁定的前几列列数，如果列不锁定，则设置为0*   width - 表格的滚动区域宽度*   height - 表格的滚动区域高度*/
function freezeTable(table, freezeRowNum, freezeColumnNum, width, height) {//获取冻结行数或者列数if (typeof(freezeRowNum) == 'string')freezeRowNum = parseInt(freezeRowNum)if (typeof(freezeColumnNum) == 'string')freezeColumnNum = parseInt(freezeColumnNum)//获取tablevar tableId;if (typeof(table) == 'string') {tableId = table;table = $('#' + tableId);} elsetableId = table.attr('id');/*** 生成最外层的DIV用来承载内部的四个DIV*/var divTableLayout = $("#" + tableId + "_tableLayout");if (divTableLayout.length != 0) {divTableLayout.before(table);divTableLayout.empty();} else {table.after("<div id='" + tableId + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");divTableLayout = $("#" + tableId + "_tableLayout");}/*** 根据需要页面table定义的属性 需要冻结的行或者列 ，对应的拼接字符串用于生成不同的DIV  【如果行列同时冻结：生成总共四个DIV】【单独冻结行或列，仅需要生成两个DIV】* 这个四个DIV都是包括数据在内，完全克隆了原本的table，*/var html = '';if (freezeRowNum > 0 && freezeColumnNum > 0)html += '<div id="' + tableId + '_tableFix" style="padding: 0px;"></div>';if (freezeRowNum > 0)html += '<div id="' + tableId + '_tableHead" style="padding: 0px;"></div>';if (freezeColumnNum > 0)html += '<div id="' + tableId + '_tableColumn" style="padding: 0px;"></div>';html += '<div id="' + tableId + '_tableData" style="padding: 0px;"></div>';//将div追加到页面$(html).appendTo("#" + tableId + "_tableLayout");var divTableFix = freezeRowNum > 0 && freezeColumnNum > 0 ? $("#" + tableId + "_tableFix") : null;var divTableHead = freezeRowNum > 0 ? $("#" + tableId + "_tableHead") : null;var divTableColumn = freezeColumnNum > 0 ? $("#" + tableId + "_tableColumn") : null;var divTableData = $("#" + tableId + "_tableData"); //位于最底层的【数据DIV】【第一个DIV，也就是原本的那个真身】divTableData.append(table);//行列同时冻结生成的【行列DIV】【第二个DIV】，一般位于左上角重叠部分if (divTableFix != null) {var tableFixClone = table.clone(true);    //克隆1tableFixClone.attr("id", tableId + "_tableFixClone");divTableFix.append(tableFixClone);}//行冻结生成的【冻结行DIV】【第三个DIV】if (divTableHead != null) {var tableHeadClone = table.clone(true);//克隆2tableHeadClone.attr("id", tableId + "_tableHeadClone");divTableHead.append(tableHeadClone);}//列冻结生成的【冻结列DIV】【第四个DIV】if (divTableColumn != null) {var tableColumnClone = table.clone(true);//克隆3tableColumnClone.attr("id", tableId + "_tableColumnClone");divTableColumn.append(tableColumnClone);}$("#" + tableId + "_tableLayout table").css("margin", "0");/*** 根据冻结行数，设置行冻结的div的高度【如果行列同时冻结，则行列div也设置对应高度】*/if (freezeRowNum > 0) {var HeadHeight = 0;var ignoreRowNum = 0;$("#" + tableId + "_tableHead tr:lt(" + freezeRowNum + ")").each(function () {if (ignoreRowNum > 0)ignoreRowNum--;else {var td = $(this).find('td:first, th:first');HeadHeight += td.outerHeight(true);ignoreRowNum = td.attr('rowSpan');if (typeof(ignoreRowNum) == 'undefined')ignoreRowNum = 0;elseignoreRowNum = parseInt(ignoreRowNum) - 1;}});HeadHeight += 2;divTableHead.css("height", HeadHeight);divTableFix != null && divTableFix.css("height", HeadHeight);}/*** 根据冻结列数，对冻结列DIV设置宽度【如果行列同时冻结，则行列div也设置对应宽度】*/if (freezeColumnNum > 0) {var ColumnsWidth = 0;var ColumnsNumber = 0;$("#" + tableId + "_tableColumn tr:eq(" + freezeRowNum + ")").find("td:lt(" + freezeColumnNum + "), th:lt(" + freezeColumnNum + ")").each(function () {if (ColumnsNumber >= freezeColumnNum)return;ColumnsWidth += $(this).outerWidth(true);ColumnsNumber += $(this).attr('colSpan') ? parseInt($(this).attr('colSpan')) : 1;});ColumnsWidth += 2;divTableColumn.css("width", ColumnsWidth);divTableFix != null && divTableFix.css("width", ColumnsWidth);}//滚动divTableData.scroll(function () {divTableHead != null && divTableHead.scrollLeft(divTableData.scrollLeft());divTableColumn != null && divTableColumn.scrollTop(divTableData.scrollTop());});divTableFix != null && divTableFix.css({ "overflow": "hidden", "position": "absolute", "z-index": "50" });divTableHead != null && divTableHead.css({ "overflow": "hidden", "width": width - 17, "position": "absolute", "z-index": "45" });divTableColumn != null && divTableColumn.css({ "overflow": "hidden", "height": height - 17, "position": "absolute", "z-index": "40" });divTableData.css({ "overflow": "scroll", "width": width, "height": height, "position": "absolute" });divTableFix != null && divTableFix.offset(divTableLayout.offset());divTableHead != null && divTableHead.offset(divTableLayout.offset());divTableColumn != null && divTableColumn.offset(divTableLayout.offset());divTableData.offset(divTableLayout.offset());
}/** 调整锁定表的宽度和高度，这个函数在resize事件中调用* * 参数定义*   table - 要锁定的表格元素或者表格ID*   width - 表格的滚动区域宽度*   height - 表格的滚动区域高度*/
function adjustTableSize(table, width, height) {var tableId;if (typeof(table) == 'string')tableId = table;elsetableId = table.attr('id');$("#" + tableId + "_tableLayout").width(width).height(height);$("#" + tableId + "_tableHead").width(width - 17);$("#" + tableId + "_tableColumn").height(height - 17);$("#" + tableId + "_tableData").width(width).height(height);
}//返回页面的高度
function pageHeight() {if ( /msie/.test(navigator.userAgent.toLowerCase())) {return document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;} else {return self.innerHeight;}
};//返回当前页面宽度
function pageWidth() {if ( /msie/.test(navigator.userAgent.toLowerCase())) {return document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth;} else {return self.innerWidth;}
};

以下是使用方法：

/*** 冻结列的绑定方法*/function freeTable(){var table = $("table");                                //获取当前tablevar tableId = table.attr('id');                        //table的ID之后作为参数传递    var freezeRowNum = table.attr('freezeRowNum');        //获取页面table定义的冻结行和列var freezeColumnNum = table.attr('freezeColumnNum');if (typeof(freezeRowNum) != 'undefined' || typeof(freezeColumnNum) != 'undefined') {freezeTable(table, freezeRowNum || 0, freezeColumnNum || 0, pageWidth()-500, pageHeight()-350);var flag = false;$(window).resize(function() {if (flag) return ;setTimeout(function() { adjustTableSize(tableId, pageWidth()-500, pageHeight()-350); flag = false; }, 100);flag = true;});}}/*** 由于 冻结列是几个DIV，因此鼠标置于一行上看到的是几块， 解决光标置上一体的变化问题*/$(document).on("mouseover",".table-bordered tbody tr td",function(){$(".table-bordered tbody").find("tr:eq("+$(this).parent().index()+")").find("td").css("background-color","#E6E6FA")});/*** 光标移出效果变化*/$(document).on("mouseout",".table-bordered tbody tr td",function(){$(".table-bordered tbody").find("tr:nth-child(odd)").find("td").css("background-color","#C6E2FF");$(".table-bordered tbody").find("tr:nth-child(even)").find("td").css("background-color","#F9F9F9");});/*** 全选按钮的点击事件*/$("#ch2").click(function(){if($(this).prop("checked")){$(this).parents("div table").parent("div").siblings().find('tbody').find("input[type='checkbox']").prop("checked",true);//让其他的几个table中checkbox也全部选中}else{$(this).parents("div table").parent("div").siblings().find('tbody').find("input[type='checkbox']").prop("checked",false);//让其他的几个table中checkbox也全部选中}});

需要根据自身的特点更改使用的js代码。

缺点，这种克隆4个table显示的方式需要改进全选时及如果tbody中含有input框时，选中冻结的table行时，不会选中其他table。

JQUERY冻结table行或列js相关推荐

jquery 获得table 行数
1.获得Table总行数,分别使用了两种方法,结果不同:: 1).$("#table_Id").children("tr").length; 只能获得静态页面t ...
Excel冻结多行多列
https://zhuanlan.zhihu.com/p/446183754 例如,冻结第一行AB列,选择C2单元格,按住shift>视图>冻结窗体.
JQuery DataTables改变行或列的背景或字体颜色
var table;table = $('#example').DataTable({dom: 'Bfrtip',scrollY: true,scrollX: true,scrollCollapse: ...
使用jquery追加table行
导jquery 定义表格id <table id="mytable"> <tr><td>第一行</td></tr> &l ...
axure中怎么做出固定首行_办公软件操作技巧078：如何在excel表格中冻结行与列...
在日常工作中,有时我们编辑的excel表格会比较大,数据内容有很多行和列,当我们拖动滚动条找到了离表头比较远的数据行或列的内容时,又看不到行或列表头标题信息了,这时再去处理数据信息就会感觉很不方便,如 ...
LISP 冻结excel窗格_粗暴讲解，2分钟 | 即懂excel 冻结首行、首列和单元格怎么弄？...
多少人上手excel,都是基本功不扎实啊?! 想起当初自己学做数据,迫于不可抗力因素,糊里糊涂上岗. 没囤过基础知识,全靠业务实践练操作. 领导甩来什么需求,当天就要查各种方法给他做出来,天天脑炸. ...
mysql行转列sql函数_sql动态行转列的两种方法
第一种方法: 代码如下: select *from ( select Url,case when Month=01 then '1月' when Month=02 then '2月' when ...
EXCEL中，怎们同时冻结首行和首列
Excel完美冻结第一行第一列的技巧 Excel冻结窗口是一项非常实用的功能.最近在使用"冻结窗格"功能时发现,同样的表格,在不同的机器上操作,却出现了不同的冻结效果.在有些电脑上 ...
table表格实现行、列冻结
客户要求实现对表格数据的头几行或者头几列进行冻结,即滚动时保持这几行/列不动,通过网上查找代码,参考已有的代码的思路,实现了可以任意对行.列进行冻结. 实现原理: 创建多个div,div之间通过css ...
ajax拿table里的th值,Jquery Ajax 异步设置Table中某列的值
可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...

JQUERY冻结table行或列js

JQUERY冻结table行或列js相关推荐

最新文章

热门文章