完美兼容IE_Opera_Firefox等主流浏览器的锁定表格的 表头以及表头列
2012-03-19 17:53
701 查看
锁定
表格的表头
和
列 终于
被我 写出来了，哇哈哈~~~~~~
， 心情大好.... 共享下 吧。
希望
看到的该文的 时候给予评价， 俗话说 吃水不忘挖井人啊。
要是朋友你
通过该文中的共享代码
测试成功了，记得 帮兄弟我
把 该文 帮忙顶起！！！！
转载请标明出自：http://blog.csdn.net/SongYanJun2011
考虑到 当 我们从数据库中 查出 某一张 表的所有数据
， 当这张 表中的 字段 非常 非常的 多， 我们
要想 全部给用户展示
，在
浏览器的
页面展示窗口 中你会发现有相当 长的 一个 表格， 如果 表格的 css 处理的不好的话
， 会其实 数据把 表格 撑 的变形，
这是我们 最不想看到的 也 最不愿意接收的。
解决的最佳 方案 就是 将 表 设置 到 一个 所应该 有的 宽度， 并且 在这个Table 中做
锁定 表头行 和 表头列
的 处理， 虽让网上 很多 类似的 文章， 但是 如果说做到 每种浏览器之间 的兼容
的文章
却很少 ，可以说是 少之又少。
上一阵子我在博文中
写了一个
冻结 表头行
和 表头 列 的
博文， 但是 却 只能
兼容 IE 核心浏览器下，
今天终于 把
这个兼容到了 所有的主流 浏览器 IE9
、Firefox、Opera
已经测试通过。
兴奋，无比兴奋。
因为正在 做项目， 有保密协议的，我就不共享源文件
了， 以下是我从我的
JSP 文件中
摘下来的。
绝对的可以
完美的解决浏览器间的
兼容问题。
步骤1：创建一个表格
， 比如 说 你的这张表
字段列 很多很多，
如下面的代码所示。
步骤2：创建一个 JS文件 ，命名为 clone_tableheader.js
步骤3：页面调用 使用到了JQuery , 我用的是 jquery-1.6.1.min.js ， 从官网 随便 下。
官方网站：http://code.jquery.com/
顶起 吧，评论
吧~~~~~！！！~~~~不要不舍得 你的手指~~~
敲两下 键盘~~~~点两下 鼠标的 事情。
Over!!!
表格的表头
和
列 终于
被我 写出来了，哇哈哈~~~~~~
， 心情大好.... 共享下 吧。
希望
看到的该文的 时候给予评价， 俗话说 吃水不忘挖井人啊。
要是朋友你
通过该文中的共享代码
测试成功了，记得 帮兄弟我
把 该文 帮忙顶起！！！！
转载请标明出自：http://blog.csdn.net/SongYanJun2011
考虑到 当 我们从数据库中 查出 某一张 表的所有数据
， 当这张 表中的 字段 非常 非常的 多， 我们
要想 全部给用户展示
，在
浏览器的
页面展示窗口 中你会发现有相当 长的 一个 表格， 如果 表格的 css 处理的不好的话
， 会其实 数据把 表格 撑 的变形，
这是我们 最不想看到的 也 最不愿意接收的。
解决的最佳 方案 就是 将 表 设置 到 一个 所应该 有的 宽度， 并且 在这个Table 中做
锁定 表头行 和 表头列
的 处理， 虽让网上 很多 类似的 文章， 但是 如果说做到 每种浏览器之间 的兼容
的文章
却很少 ，可以说是 少之又少。
上一阵子我在博文中
写了一个
冻结 表头行
和 表头 列 的
博文， 但是 却 只能
兼容 IE 核心浏览器下，
今天终于 把
这个兼容到了 所有的主流 浏览器 IE9
、Firefox、Opera
已经测试通过。
兴奋，无比兴奋。
因为正在 做项目， 有保密协议的，我就不共享源文件
了， 以下是我从我的
JSP 文件中
摘下来的。
绝对的可以
完美的解决浏览器间的
兼容问题。
步骤1：创建一个表格
， 比如 说 你的这张表
字段列 很多很多，
如下面的代码所示。
<table style="border-bottom-color: black; border-top-color: black; width: 2048px; color: #000000; border-right-color: black; font-size: medium; border-left-color: black" id="MyTable" border="1" cellspacing="0" cellpadding="0" > <thead> <tr style="background-color: #eeeeee; margin: 0px; line-height: 20px; font-weight: bold; padding: 0px 0px 0px 0px;"> <th>序号</th> <th>机组编号</th> <th>机组名称</th> <th>铭牌容量</th> <th>管理单位</th> <th>控股单位</th> <th>控股比例</th> <th>调度单位</th> <th>所属电网</th> <th>投运时间</th> <th>统计时间</th> <th>停统时间</th> <th>齿轮箱厂家</th> <th>叶片厂家</th> <th>发电机厂家</th> <th>控制系统厂家</th> <th>进口/国产标志</th> </tr> </thead> <tbody> <tr> <td>10</td> <td>13424046</td> <td>官厅风电046号机组</td> <td>1.50000</td> <td>北京能源投资（集团）</td> <td>北京能源投资（集团）</td> <td>51%</td> <td>调度单位 哦也</td> <td>华北电网</td> <td>2010.01.01 08:00</td> <td>2010.02.01 08:00</td> <td>2010.03.01 08:00</td> <td>北京鼓风机厂</td> <td>北京巴布克尔有限公司</td> <td>华北电力设备成套公司</td> <td>龙源电力集团公司</td> <td>0000</td> </tr> <tr> <td>10</td> <td>13424046</td> <td>官厅风电046号机组</td> <td>1.50000</td> <td>北京能源投资（集团）</td> <td>北京能源投资（集团）</td> <td>51%</td> <td>调度单位 哦也</td> <td>华北电网</td> <td>2010.01.01 08:00</td> <td>2010.02.01 08:00</td> <td>2010.03.01 08:00</td> <td>北京鼓风机厂</td> <td>北京巴布克尔有限公司</td> <td>华北电力设备成套公司</td> <td>龙源电力集团公司</td> <td>0000</td> </tr> <tr> <td>10</td> <td>13424046</td> <td>官厅风电046号机组</td> <td>1.50000</td> <td>北京能源投资（集团）</td> <td>北京能源投资（集团）</td> <td>51%</td> <td>调度单位 哦也</td> <td>华北电网</td> <td>2010.01.01 08:00</td> <td>2010.02.01 08:00</td> <td>2010.03.01 08:00</td> <td>北京鼓风机厂</td> <td>北京巴布克尔有限公司</td> <td>华北电力设备成套公司</td> <td>龙源电力集团公司</td> <td>0000</td> </tr> <tr> <td>10</td> <td>13424046</td> <td>官厅风电046号机组</td> <td>1.50000</td> <td>北京能源投资（集团）</td> <td>北京能源投资（集团）</td> <td>51%</td> <td>调度单位 哦也</td> <td>华北电网</td> <td>2010.01.01 08:00</td> <td>2010.02.01 08:00</td> <td>2010.03.01 08:00</td> <td>北京鼓风机厂</td> <td>北京巴布克尔有限公司</td> <td>华北电力设备成套公司</td> <td>龙源电力集团公司</td> <td>0000</td> </tr> <tr> <td>10</td> <td>13424046</td> <td>官厅风电046号机组</td> <td>1.50000</td> <td>北京能源投资（集团）</td> <td>北京能源投资（集团）</td> <td>51%</td> <td>调度单位 哦也</td> <td>华北电网</td> <td>2010.01.01 08:00</td> <td>2010.02.01 08:00</td> <td>2010.03.01 08:00</td> <td>北京鼓风机厂</td> <td>北京巴布克尔有限公司</td> <td>华北电力设备成套公司</td> <td>龙源电力集团公司</td> <td>0000</td> </tr> <tr> <td>10</td> <td>13424046</td> <td>官厅风电046号机组</td> <td>1.50000</td> <td>北京能源投资（集团）</td> <td>北京能源投资（集团）</td> <td>51%</td> <td>调度单位 哦也</td> <td>华北电网</td> <td>2010.01.01 08:00</td> <td>2010.02.01 08:00</td> <td>2010.03.01 08:00</td> <td>北京鼓风机厂</td> <td>北京巴布克尔有限公司</td> <td>华北电力设备成套公司</td> <td>龙源电力集团公司</td> <td>0000</td> </tr> <tr> <td>10</td> <td>13424046</td> <td>官厅风电046号机组</td> <td>1.50000</td> <td>北京能源投资（集团）</td> <td>北京能源投资（集团）</td> <td>51%</td> <td>调度单位 哦也</td> <td>华北电网</td> <td>2010.01.01 08:00</td> <td>2010.02.01 08:00</td> <td>2010.03.01 08:00</td> <td>北京鼓风机厂</td> <td>北京巴布克尔有限公司</td> <td>华北电力设备成套公司</td> <td>龙源电力集团公司</td> <td>0000</td> </tr> <tr> <td>10</td> <td>13424046</td> <td>官厅风电046号机组</td> <td>1.50000</td> <td>北京能源投资（集团）</td> <td>北京能源投资（集团）</td> <td>51%</td> <td>调度单位 哦也</td> <td>华北电网</td> <td>2010.01.01 08:00</td> <td>2010.02.01 08:00</td> <td>2010.03.01 08:00</td> <td>北京鼓风机厂</td> <td>北京巴布克尔有限公司</td> <td>华北电力设备成套公司</td> <td>龙源电力集团公司</td> <td>0000</td> </tr> <tr> <td>10</td> <td>13424046</td> <td>官厅风电046号机组</td> <td>1.50000</td> <td>北京能源投资（集团）</td> <td>北京能源投资（集团）</td> <td>51%</td> <td>调度单位 哦也</td> <td>华北电网</td> <td>2010.01.01 08:00</td> <td>2010.02.01 08:00</td> <td>2010.03.01 08:00</td> <td>北京鼓风机厂</td> <td>北京巴布克尔有限公司</td> <td>华北电力设备成套公司</td> <td>龙源电力集团公司</td> <td>0000</td> </tr> <tr> <td>10</td> <td>13424046</td> <td>官厅风电046号机组</td> <td>1.50000</td> <td>北京能源投资（集团）</td> <td>北京能源投资（集团）</td> <td>51%</td> <td>调度单位 哦也</td> <td>华北电网</td> <td>2010.01.01 08:00</td> <td>2010.02.01 08:00</td> <td>2010.03.01 08:00</td> <td>北京鼓风机厂</td> <td>北京巴布克尔有限公司</td> <td>华北电力设备成套公司</td> <td>龙源电力集团公司</td> <td>0000</td> </tr> <tr> <td>10</td> <td>13424046</td> <td>官厅风电046号机组</td> <td>1.50000</td> <td>北京能源投资（集团）</td> <td>北京能源投资（集团）</td> <td>51%</td> <td>调度单位 哦也</td> <td>华北电网</td> <td>2010.01.01 08:00</td> <td>2010.02.01 08:00</td> <td>2010.03.01 08:00</td> <td>北京鼓风机厂</td> <td>北京巴布克尔有限公司</td> <td>华北电力设备成套公司</td> <td>龙源电力集团公司</td> <td>0000</td> </tr> <tr> <td>10</td> <td>13424046</td> <td>官厅风电046号机组</td> <td>1.50000</td> <td>北京能源投资（集团）</td> <td>北京能源投资（集团）</td> <td>51%</td> <td>调度单位 哦也</td> <td>华北电网</td> <td>2010.01.01 08:00</td> <td>2010.02.01 08:00</td> <td>2010.03.01 08:00</td> <td>北京鼓风机厂</td> <td>北京巴布克尔有限公司</td> <td>华北电力设备成套公司</td> <td>龙源电力集团公司</td> <td>0000</td> </tr> <tr> <td>10</td> <td>13424046</td> <td>官厅风电046号机组</td> <td>1.50000</td> <td>北京能源投资（集团）</td> <td>北京能源投资（集团）</td> <td>51%</td> <td>调度单位 哦也</td> <td>华北电网</td> <td>2010.01.01 08:00</td> <td>2010.02.01 08:00</td> <td>2010.03.01 08:00</td> <td>北京鼓风机厂</td> <td>北京巴布克尔有限公司</td> <td>华北电力设备成套公司</td> <td>龙源电力集团公司</td> <td>0000</td> </tr> <tr> <td>10</td> <td>13424046</td> <td>官厅风电046号机组</td> <td>1.50000</td> <td>北京能源投资（集团）</td> <td>北京能源投资（集团）</td> <td>51%</td> <td>调度单位 哦也</td> <td>华北电网</td> <td>2010.01.01 08:00</td> <td>2010.02.01 08:00</td> <td>2010.03.01 08:00</td> <td>北京鼓风机厂</td> <td>北京巴布克尔有限公司</td> <td>华北电力设备成套公司</td> <td>龙源电力集团公司</td> <td>0000</td> </tr> <tr> <td>10</td> <td>13424046</td> <td>官厅风电046号机组</td> <td>1.50000</td> <td>北京能源投资（集团）</td> <td>北京能源投资（集团）</td> <td>51%</td> <td>调度单位 哦也</td> <td>华北电网</td> <td>2010.01.01 08:00</td> <td>2010.02.01 08:00</td> <td>2010.03.01 08:00</td> <td>北京鼓风机厂</td> <td>北京巴布克尔有限公司</td> <td>华北电力设备成套公司</td> <td>龙源电力集团公司</td> <td>0000</td> </tr> </tbody> </table>
步骤2：创建一个 JS文件 ，命名为 clone_tableheader.js
// JavaScript Document
<!--
/*
@ JavaScript Clone table header
@ 作者：宋延军
@ 功能：冻结锁定 表格头 和 列
@ 日期：2012-03-19 下午13:17:41
@ 邮箱：songyanju_stars@126.com
@ QQ号：181744926
@ 页面加载调用：
$(document).ready(function () {
FixTable("MyTable", 2, 600, 400);
});
*/
function FixTable(TableID, FixColumnNumber, width, height) {
/// <summary>
/// 锁定表头和列
/// <para> http://blog.csdn.net/SongYanJun2011 </para>
/// </summary>
/// <param name="TableID" type="String">
/// 要锁定的Table的ID
/// </param>
/// <param name="FixColumnNumber" type="Number">
/// 要锁定列的个数
/// </param>
/// <param name="width" type="Number">
/// 显示的宽度
/// </param>
/// <param name="height" type="Number">
/// 显示的高度
/// </param>
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": "Silver" });
$("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
$("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
$("#" + TableID + "_tableData").css({ "overflow": "scroll", "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());
}
//-->步骤3：页面调用 使用到了JQuery , 我用的是 jquery-1.6.1.min.js ， 从官网 随便 下。
官方网站：http://code.jquery.com/
<!-- Clone Table Header Start -->
<script type="text/javascript" src="../../js/cloneTableHeader/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../../js/cloneTableHeader/clone_tableheader.js"></script>
<script type="text/javascript">
<!--
//页面初始化 加载 JS函数
$(document).ready(cloneTableHeader_Width);
//调整 浏览器 表格的显示宽度 以及 调用 锁定 表头和列 的JS函数。
function cloneTableHeader_Width(){
//document.body.clientWidth获得客户区域(浏览器窗口,不包括菜单栏和状态栏,就是内容窗口)的宽度 - 35像素的滚动条宽度。
var myTable_Width = (document.body.clientWidth-35);
//alert(myTable_Width);//测试屏幕宽度
if((document.body.clientWidth-35)<855){
myTable_Width=855; //宽度
}
//调用 锁定表头和 列 的JS函数
$(document).ready(function () {
FixTable("MyTable", 2, myTable_Width, 200);
});
}
//-->
</script>
<!-- End -->顶起 吧，评论
吧~~~~~！！！~~~~不要不舍得 你的手指~~~
敲两下 键盘~~~~点两下 鼠标的 事情。
Over!!!
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript小组件 原生脚本排序table表格兼容ie firefox opera chrome 浏览器
- [完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器
- JS日期选择器(兼容IE,Firefox,Opera等主流浏览器)
- [完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器
- JS日期选择器(兼容IE,Firefox,Opera等主流浏览器)
- 兼容多浏览器实现半透明(Opera ie firefox)
- jquery下拉菜单效果（超简洁实用，兼容IE和firefox等主流浏览器）
- 兼容所有主流浏览器的图片上传本地预览（IE\FIREFOX\CHROME)
- 多图片上传+图片预览，兼容所有浏览器 IE5/IE6/IE7/IE8/IE9/Chrome/Safari/Firefox/Opera/
- [原创]实现与服务器时间同步的跨平台JS脚本 支持IE , firefox , Opera ,Netscape 等主流浏览器
- 兼容 IE 6、7、8 和主流 Firefox 等浏览器CSS代码
- 一个兼容FireFox与IE等主流浏览器的在线编辑器（LordEditor）
- 兼容IE，Firefox，Opera等浏览器的添加到收藏夹js代码实现
- 完美兼容火狐ie等主流浏览器回车键登录方法
- 兼容多种浏览器的Ctrl+Enter提交--兼容firefox、ie、opera
- (造福中国前端界）纯前端Js完美解决各种汉字urlencode,urldecode，编码解码问题，不借助任何字库，内码表，轻松一行，兼容IE8+，chrome，firefox，safari等主流浏览器
- 使用IE条件注释 实现兼容 IE, Opera, Firefox 的 DIV+CSS 表格布局 By shawl.qiu
- jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、Chrome、Opera
- jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、Chrome、Opera
- IE, FireFox, Opera 浏览器支持CSS实现Alpha透明的方法 兼容问题