table表头标题th浮动提示-MyTable.js
2014-03-12 14:23
471 查看
/* $(document).ready(function () { var maxH = ($(window).height() - $("#divParent").position().top - 6); $("#divParent").css("height", maxH + "px").css("max-width", $("#tb1").width() + "px"); $.CreateFixedTableThead(document.getElementById("tbThead"), true); $.CreateFixedTableThead(document.getElementById("tbDeatil"), true); }); */ (function (a) { a.CreateFixedTableThead = function (useTable, doNotSetParentDiv) { if (!useTable) return; var fixedDivId = $(useTable).attr("id") + "mytable1111"; if (document.getElementById(fixedDivId)) { $("#" + fixedDivId).css("width", ($(useTable).width() + 2) + "px"); return; } //var newObject = $(useTable).find("thead"); useTable = $(useTable); //useTable.css("max-height","400px"); var newObject, newTheadDiv, useTableParent; newObject = useTable.clone(); newObject.attr("id", fixedDivId).attr("width", "100%").css("width", "100%"); //.removeAttr("width"); //.css({ 'margin-right': 0, 'margin-left': 0 }); newObject.find("tbody").remove(); if (newObject.find("tr").length <= 0) { newObject.html(useTable.find(".trcss")); } useTableParent = useTable.parent(); //$(this).height() if (!useTableParent) { return; } var trLength = newObject.find("tr").length; //================设置表外层格式 开始================================================ if (!doNotSetParentDiv) { //useTable.find("tr").height() var maxH = ($(window).height() - useTableParent.position().top - 6), winWidth = $(window).width(); if ($.browser.msie) { maxH = maxH - 14; } //设置父级div的position 值 //useTableParent.css("position", "relative"); //{position:'relative',overflow-y:'auto',max-height:400} useTableParent.css({ "position": 'relative', "overflow-y": 'auto', "max-height": maxH + "px" }); if (winWidth < useTableParent.width() || winWidth < useTable.width()) { //当表格宽度大于界面时设置 横向滚动条。 if (useTableParent.css("max-width") == "none" || useTableParent.css("max-width") == "") { useTableParent.css("max-width", $(window).width() + "px").css("overflow-x", "auto"); $("body").css("overflow-x", "hidden"); if ($.browser.msie) { maxH = maxH - 20; } useTableParent.css("max-height", (maxH) + "px"); } } } //================设置表外层格式 结束================================================ //position: absolute; newTheadDiv = $("<div style='position:fixed;left:0px;z-index:10;'></div>"); newTheadDiv.css("width", (useTable.width() + 2) + "px") .css("top", useTableParent.position().top + "px"); if (trLength > 1) { newTheadDiv.css("left", ""); } //.css("margin-left", useTable.css("margin-left")); newTheadDiv.append(newObject); useTableParent.append(newTheadDiv); var tdArr = $(newObject).find("tr:first td,th"); useTable.find("tr:first").find("th,td").each(function (index, obj) { $(tdArr[index]).css("width", $(obj).width() + "px"); }); $(window).resize(function () { newTheadDiv.css("width", (useTable.width() + 2) + "px"); var tdArr = $(newObject).find("tr:first td,th"); useTable.find("tr:first").find("th,td").each(function (index, obj) { $(tdArr[index]).css("width", $(obj).width() + "px"); }); }); $(useTableParent).scroll(function () { var leval = $(this).scrollLeft(); if (leval == 0) { $(newTheadDiv).css("left", ""); } else { leval = leval; $(newTheadDiv).css("left", "-" + leval + "px"); } }); }; })(jQuery);
方法二:
<thead> <tr style="position: relative;top: expression((this.offsetParent.scrollTop>this.parentElement.parentElement.offsetTop?this.offsetParent.scrollTop-this.parentElement.parentElement.offsetTop-38:0)-1);"> <th class="tdcss" onclick="sortAble('tb',0,'int')"> 房间资料分析 </th> <th class="tdcss" colspan="4" onclick="sortAble('tb',1,'int')"> 本日统计 </th> <th class="tdcss" colspan="4" onclick="sortAble('tb',2,'int')"> 本月统计 </th> <th class="tdcss" colspan="4" onclick="sortAble('tb',3,'int')"> 本年统计 </th> </tr> </thead>
主要是此段代码:
<tr style="position: relative;top: expression((this.offsetParent.scrollTop>this.parentElement.parentElement.offsetTop?this.offsetParent.scrollTop-this.parentElement.parentElement.offsetTop-38:0)-1);" >
至少兼容IE8
相关文章推荐
- DIV+js+css跟随鼠标的浮动提示框
- 解决Discuz! X2.5 后台能登陆,前台提示“[1146] Table 'xxx.myrepeats' doesn't exist”错误
- js和jquery 实现网站来消息网站标题闪动提示
- JS(JQ)实现table表格固定表头且表头可以随横向滚动而滚动
- JS(JQ)实现table表格固定表头且表头可以随横向滚动而滚动
- 使用js隐藏GridView的表头(hide the table header of GridView by JS)
- js/jquery常用方法(replaceALl、new Map()、点击th(表头)或拖动tr只前台排序)
- jtable表头提示文本--通过重写表格头TableHeader的渲染器来实现
- BootStrapTable.js 表头与内容无法对齐
- JS实现超简洁网页title标题跑动闪烁提示效果代码
- [置顶] 自己做个js表格插件呗--mytable v0.1
- mysql创建表时提示 1050 - Table'`test`.`mytable`' already exists
- js 实现网站来消息网站标题闪动提示 .
- JS实现table表格固定表头且表头随横向滚动而滚动
- 表格添加固定表头,js 实现 tableFixedHead.js
- [JS 最简单简洁的插件] 浮动提示 (title增强型)
- js对table排序(类似点击Excel表头排序)
- [dataTables.js error] Uncaught TypeError: myTable.row is not a function
- Html Table用JS导出excel格式问题 导出EXCEL后单元格里的000412341234会变成412341234 7-14 会变成 2018-7-14(7月14) 自定义格式 web利用table表格生成excel格式问题 js导出excel增加表头、mso-number-format定义数据格式 数字输出格式转换 mso-number-format:"\@"
- js对table排序(类似点击Excel表头排序)