表格列冻结
来源：互联网 发布：闪动图片制作软件 编辑：程序博客网 时间：2024/06/09 13:46
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title><script src="CloneTableColumn.js" type="text/javascript"></script> <script src="jquery-1.7.1.min.js" type="text/javascript"></script> <style type="text/css"> .itemList { border: solid 1px #cccccc; overflow: auto; border-collapse: collapse; } .itemList td { padding: 0px 0px 0px 0px; color: #444444; border: solid 1px #cccccc; text-align: center; line-height: 20px; } .selected { background-color: #fdee88; } .hovertr { background-color: #fff8c7; } .errortd { border: dashed 1px red; } </style> <script type="text/javascript"> jQuery(function() {CloneTableColumn("tab1"); // FixTable(tab1, 1, 60, 100); // jQuery.fn.CloneTableHeader("tab1") }); </script></head><body> <form id="form1" runat="server"> <div style=" position:absolute; top:47px; left:72px;width:900px; overflow-x:auto;overflow-y:auto;" id="tableDiv" > <table cellpadding="0" width="1870" id="tab1" cellspacing="0" border="0" class="itemList"> <thead> <tr style="background-color: #eeeeee; margin: 0px; line-height: 20px; font-weight: bold; padding: 0px 0px 0px 0px;"> <td width="70"> 编号 </td> <td width="300"> 姓名 </td> <td width="300"> 年龄</td> <td width="300"> 城市</td> <td width="300"> 身高</td> <td width="300"> 体重</td> <td width="300"> 电话</td> </tr> </thead> <tbody> <tr> <td width="70">1</td> <td width="200">张三1</td> <td width="200">22</td> <td width="200">北京</td> <td width="200">170</td> <td width="200">99</td> <td width="200">110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> <tr> <td width="70">1</td> <td>张三1</td> <td>22</td> <td>北京</td> <td>170</td> <td>99</td><td>110</td> </tr> </tbody> </table> </div> </form></body></html>// JavaScript DocumentCloneTableColumn = function(tableId,divId){var tableOrg = jQuery("#" + tableId);var table = tableOrg.clone();table.attr("id", "cloneTable");//隐藏头var header = jQuery(tableOrg).find("thead"); jQuery(header).find("tr:first td:first").hide();//计算宽度var tbody = jQuery(table).find("tbody");var columns = jQuery(tbody).find("tr:first td:first");var columnsWidth = columns.outerWidth(true);var tableCloneCols = jQuery(tableOrg).find("tbody tr");//隐藏第一列for(var i = 0;i<tableCloneCols.size();i++){tableCloneCols.eq(i).find("td:first").hide();}var columnsDiv = document.createElement("div");columnsDiv.appendChild(table[0]);jQuery(columnsDiv).css("left", "0");jQuery(columnsDiv).css("position", "absolute");jQuery(columnsDiv).css("top", "47px");jQuery(columnsDiv).css("width", columnsWidth);jQuery(columnsDiv).css("overflow", "hidden");jQuery(columnsDiv).css("z-index", "20");jQuery(columnsDiv).attr("id", tableId + "tableColumnDiv");jQuery(columnsDiv).insertBefore(tableOrg.parent()); //jQuery(columnsDiv).wrap(tableOrg.parent());//alert(tableCloneCols.size())}
