一个实用的表格（锁定表头，可调整单元格大小，可排序）
生活随笔
收集整理的这篇文章主要介绍了
一个实用的表格（锁定表头，可调整单元格大小，可排序）
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
昨天在网上找到一个不错的表格显示，该表格可以锁定表头，可调整单元格的大小，同时还可以对数据进行排序，显示效果如下：
原代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0052)http://qbit.100steps.net/javascript/%B1%ED%B8%F1.htm -->
<HTML><HEAD><TITLE>表格</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>BODY {}{
BACKGROUND: #d4d0c8; SCROLLBAR-ARROW-COLOR: #002d96; SCROLLBAR-BASE-COLOR: #c2cbcf; scrollbar-3d-light-color: #ffffff
}
TABLE {}{
TABLE-LAYOUT: fixed; FONT-SIZE: 9pt; CURSOR: default
}
TR {}{
HEIGHT: 15px; ; BACKGROUND-COLOR: expression((this.sectionRowIndex%2)?"#ffffff":"#efefef")
}
TD {}{
PADDING-LEFT: 2px
}
#TList {}{
BORDER-RIGHT: #666 1px solid; MARGIN: 40px 10px 10px 70px; OVERFLOW: hidden; BORDER-LEFT: #666 1px solid; WIDTH: 600px; BORDER-BOTTOM: #666 1px solid; HEIGHT: 350px
}
#THead {}{
MARGIN-TOP: 0px; BACKGROUND: #efefef; MARGIN-LEFT: -1px; OVERFLOW: hidden; ; WIDTH: expression(this.parentNode.offsetWidth); HEIGHT: 22px
}
#TBody {}{
MARGIN-TOP: 0px; BACKGROUND: #ffffff; MARGIN-LEFT: -1px; OVERFLOW: scroll; ; WIDTH: expression(this.parentNode.offsetWidth); ; HEIGHT: expression(this.parentNode.offsetHeight-23)
}
#Ttitle {}{
BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonhighlight 1px solid; BACKGROUND: #d6d3ce; BORDER-LEFT: buttonhighlight 1px solid; ; WIDTH: expression(this.parentNode.offsetWidth); BORDER-BOTTOM: buttonshadow 1px solid; HEIGHT: 21px
}
</STYLE>
<SCRIPT language=javascript>
function Table() //创建容器
{
var MyTable = document.createElement("div");
document.getElementsByTagName("body")[0].appendChild(MyTable);
MyTable.setAttribute("id" , "TList");
var MyHead = document.createElement("div");
MyTable.appendChild(MyHead);
MyHead.setAttribute("id" , "THead");
var MyBody = document.createElement("div");
MyTable.appendChild(MyBody);
MyBody.setAttribute("id" , "TBody");
MyBody.onscroll = HeadScroll;
MyHead.innerHTML ="<table onselectstart=\"return false\" id=\"MyHeadTab\" border=1 cellpadding=\"0\" cellspacing=\"0\" bordercolordark=\"#FFFFFF\" bordercolorlight=\"#6C6969\"></table>";
MyBody.innerHTML ="<table id=\"MyBodyTab\" border=1 bordercolor=#cccccc style=\"border-collapse:collapse;\" frame=void></table>";
AddCell();
}
function AddCell() //增加列
{
var arg = 1;
if (arguments.length < 1) //增加空列
arg = 0;
for (var i = 0; i < arguments.length; i++) //参数不足
if (arguments[i].length < 1 && arg == 1)
return;
var H = document.getElementById("MyHeadTab");
if (H.rows.length < 1)
{
var Row = H.insertRow();
Row.setAttribute("id" , "Ttitle");
Row.onmousedown = ChangWidth;
Row.onmousemove = ChangCursor;
}
H = H.rows(0);
var B = document.getElementById("MyBodyTab");
var Tcell;
var CellIndex = H.cells.length - 1;
if (arguments[3] != undefined)
if (arguments[3] == -1)
{
if (H.cells[0].innerText != "序号")
return;
for (var i = 0; i < B.rows.length; i++)
B.rows[i].cells(0).innerText = i + 1;
return;
}
else
CellIndex = arguments[3];
if (CellIndex == -1)
Tcell = H.insertCell();
else
Tcell = H.insertCell(CellIndex);
if (arg == 0)
{
Tcell.innerText = " ";
Tcell.style.width = 1500;
}
else
{
Tcell.innerText = arguments[0];
Tcell.style.width = arguments[2];
}
Tcell.oType = arguments[1];
for (var i = 0; i < B.rows.length; i++)
{
var Bcell = B.rows(i).insertCell(CellIndex);
Bcell.style.width = arguments[2];
if (CellIndex == 0)
Bcell.innerHTML = i + 1;
}
}
function AddRow(Text) //增加行
{
if (Text == undefined)
return;
var B = document.getElementById("MyBodyTab");
var len = document.getElementById("MyHeadTab").rows(0).cells;
var Row = B.insertRow();
var Str = Text.split(",");
if (len[0].innerText == "序号")
Str.unshift(Row.sectionRowIndex + 1);
for (var i = 0; i < len.length; i++)
{
var Cell = Row.insertCell();
if (i + 1 != len.length)
{
Cell.innerHTML = Str[i] == undefined ? "" : Str[i];
Cell.style.width = document.getElementById("MyHeadTab").rows(0).cells[i].style.width;
}
}
Row.onmouseover = function() {
if (this.style.background == "#2a63de")
return;
this.style.background = "#3a6ea5";
this.style.color = "#ffffff";
}
Row.onmouseout = function() {
if (this.style.background == "#2a63de")
return;
this.style.background = (this.sectionRowIndex % 2) ? "#ffffff" : "#efefef";
this.style.color = "#000000";
}
Row.onclick = function() {
for (var i = 0; i < document.getElementById("MyBodyTab").rows.length; i++) //可以用折半查找以提高效率
{
/**//* //此行用于清除列选中
for (var j = 0; j < document.getElementById("MyBodyTab").rows(i).cells.length; j++)
if (document.getElementById("MyBodyTab").rows(i).cells[j].bgColor == "#2a63de")
document.getElementById("MyBodyTab").rows(i).cells[j].bgColor = "";
*/
with(document.getElementById("MyBodyTab").rows(i))
{
if (style.background == "#2a63de")
{
style.background = (i % 2) ? "#ffffff" : "#efefef";
style.color = "#000000";
break;
}
}
}
this.style.background = "#2a63de";
this.style.color = "#ffffff";
}
}
function HeadScroll()
{
document.getElementById("THead").scrollLeft = document.getElementById("TBody").scrollLeft;
}
function ChangWidth()
{
var e = event.srcElement;
if (e == undefined)
return;
if (e.tagName != "TD")
return;
var H = document.getElementById("MyHeadTab");
var B = document.getElementById("MyBodyTab");
var CellIndex;
for (var i = 0; i < H.rows(0).cells.length; i++)
if (H.rows(0).cells[i] == e)
{
CellIndex = i;
break;
}
var l = e.offsetLeft + 70;
if (e.style.cursor == "e-resize") //是改变列宽
{
e.setCapture();
document.onmousemove = function ()
{
if (e == undefined)
return;
e.style.cursor = "e-resize";
var w = event.x + document.getElementById("THead").scrollLeft - l;
if (w >= 5)
{
e.style.width = w;
if (B.rows.length < 1)
return;
B.rows(0).cells[CellIndex].style.width = w;
if(typeof(Y) != "undefined")
clearTimeout(Y);
if (B.rows.length < 50) //防止排序有Bug
Y = setTimeout("ChangWidthx("+ CellIndex +")" , 100);
else
Y = setTimeout("ChangWidthx("+ CellIndex +")" , 800);
}
HeadScroll();
}
document.onmouseup = function ()
{
if (e == undefined)
return;
e.releaseCapture();
e = undefined;
}
}
else
{
//排序
if (event.button == 1)
TdSort(CellIndex);
//SelectCell(CellIndex);
}
}
function ChangWidthx(CellIndex)
{
var B = document.getElementById("MyBodyTab");
var w = document.getElementById("MyHeadTab").rows(0).cells[CellIndex].style.width;
for (var i = 0; i < B.rows.length; i++)
B.rows(i).cells[CellIndex].style.width = w;
B.rows(0).cells[B.rows(0).cells.length-1].style.width = 0;
if (B.offsetWidth < B.parentNode.parentNode.offsetWidth)
B.rows(0).cells[B.rows(0).cells.length-1].style.width = B.parentNode.parentNode.offsetWidth - B.offsetWidth + 20;
HeadScroll();
}
function ChangCursor()
{
var e = event.srcElement;
if (e.tagName != "TD")
return;
var x = event.x + document.getElementById("THead").scrollLeft; //此值在固定表头时要更改
var l = e.offsetLeft + 70;
if (x >= l + e.offsetWidth + 8)
e.style.cursor = "e-resize";
else
e.style.cursor = "default";
}
function TdSort(CellIndex)
{
var Text = "↑";
var S = 1; //向上排
var H = document.getElementById("MyHeadTab");
var This = H.rows(0).cells[CellIndex];
if (This.innerText == "序号" || This.innerText == " ")
return; //没有数据或序号列，不排序
if (This.innerText.indexOf("↑") != -1)
{
Text = "↓";
S = 0;
}
for (var i = 0; i < H.rows(0).cells.length; i++)
{
var Ttitle = H.rows(0).cells[i];
if (Ttitle.innerText.indexOf("↑") != -1 || Ttitle.innerText.indexOf("↓") != -1)
{
Ttitle.innerText = Ttitle.innerText.substring(0 , Ttitle.innerText.length - 2);
break;
}
}
This.innerText += " "+ Text;
TSort(CellIndex , This.oType , S); //开始排序
}
function TSort(CellIndex , oType , Type)
{
var Temp = document.getElementById("MyBodyTab").tBodies[0].rows;
var A = new Array();
for (var i = 0; i < Temp.length; i++)
A[i] = Temp[i];
A.sort(SortSub(CellIndex , oType , Type));
for (var i = 0; i < A.length; i++)
document.getElementById("MyBodyTab").tBodies[0].appendChild(A[i]);
setTimeout("AddCell(\"序号\" , \"Num\" , 40 , -1)" , 1000);
}
function parseStr(s)
{
return String(s).toUpperCase();
}
function parseDate(s)
{
return Date.parse(s.replace(/\-/g, '/'));
}
function SortSub(CellIndex , oType , Type)
{
var ThisType = String;
if (oType == "Num")
ThisType = Number;
else if (oType == "Date")
ThisType = parseDate;
else if (oType == "Str")
ThisType = parseStr;
return function (x,y)
{
if (ThisType(x.cells[CellIndex].innerText) > ThisType(y.cells[CellIndex].innerText))
return Type ? 1 : -1;
if (ThisType(x.cells[CellIndex].innerText) < ThisType(y.cells[CellIndex].innerText))
return Type ? -1 : 1;
return 0;
};
}
function window.onload()
{
Table();
AddCell("姓名" , "Text" , 70);
AddCell("年龄" , "Num" , 55);
AddCell("性别" , "Str" , 55);
AddCell("地址" , "Text" , 120);
AddCell("联系电话" , "Text" , 120);
AddCell("E-mail" , "Text" , 120);
AddCell("序号" , "Num" , 40 , 0);
AddCell("身份证号码" , "Text" , 120);
for (var i = 0; i < 30; i++)
AddRow("小刚,"+ (24+i) +",男,传化物流基地,82878566,lzg1215@hotmail.com,41302619821215");
}
</SCRIPT>
<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY></BODY></HTML>
可惜所有代码都是用javascript写的，数据添加也是用javascript动态添加的。
我想把它应用在ASP.NET的程序中，通过一个repeater控件将数据库中的数据动态取出来，显示出如上效果。
经过我一个下午的调试修改，终于实现了我的想法。下面是源代码：
default.css:
BODY {}{
/**//*BACKGROUND: #d4d0c8;
SCROLLBAR-ARROW-COLOR: #002d96;
SCROLLBAR-BASE-COLOR: #c2cbcf;
scrollbar-3d-light-color: #ffffff*/
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #006699;
scrollbar-base-color : #ffffff;
scrollbar-highlight-color: #006699;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-track-color: #f8f8f8;
scrollbar-arrow-color: #006699;
}
/**//*TABLE {
TABLE-LAYOUT: fixed;
FONT-SIZE: 9pt;
CURSOR: default
}*/
.TR {}{
HEIGHT: 20px;
BACKGROUND-COLOR: expression((this.sectionRowIndex%2)?"#ffffff":"#efefef")
}
.TD {}{
PADDING-LEFT: 2px
}
#MyHeadTab
{}{
TABLE-LAYOUT: fixed; FONT-SIZE: 9pt; CURSOR: default
}
#MyBodyTab
{}{
TABLE-LAYOUT: fixed; FONT-SIZE: 9pt; CURSOR: default
}
#TList {}{
BORDER-RIGHT: #666 1px solid;
BORDER-LEFT: #666 1px solid;
BORDER-BOTTOM: #666 1px solid;
OVERFLOW: hidden;
MARGIN: 40px 10px 10px 70px;
/**//*
WIDTH: 600px;
HEIGHT: 350px;*/
}
#THead {}{
MARGIN-TOP: 0px;
BACKGROUND: #efefef;
MARGIN-LEFT: -1px;
OVERFLOW: hidden;
WIDTH: expression(this.parentNode.offsetWidth);
HEIGHT: 25px;
}
#TBody {}{
MARGIN-TOP: 0px;
BACKGROUND: #ffffff;
MARGIN-LEFT: -1px;
OVERFLOW: scroll;
WIDTH: expression(this.parentNode.offsetWidth);
HEIGHT: expression(this.parentNode.offsetHeight-25)
}
#Ttitle {}{
BORDER-RIGHT: buttonshadow 1px solid;
BORDER-TOP: buttonhighlight 1px solid;
BACKGROUND: #d6d3ce;
BORDER-LEFT: buttonhighlight 1px solid;
WIDTH: expression(this.parentNode.offsetWidth);
BORDER-BOTTOM: buttonshadow 1px solid;
HEIGHT: 24px
}
Table.aspx
<%@ Page language="c#" Codebehind="Table.aspx.cs" AutoEventWireup="false" Inherits="JavaScriptDemo.Table" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Table</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<META content="MSHTML 6.00.2900.2963" name="GENERATOR">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<link type="text/css" href="css/default.css" rel="stylesheet">
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<div id="TList" style="WIDTH: 700px; HEIGHT: 450px">
<div id="THead">
<table onselectstart="return false" id="MyHeadTab" border="1" cellpadding="0" cellspacing="0"
bordercolordark="#ffffff" bordercolorlight="#6c6969">
<tr id="Ttitle" onmousedown="ChangWidth();" onmousemove="ChangCursor();">
<td width="35" align="center">序号</td>
<td width="100" align="center">客户编号</td>
<td width="200" align="center">公司名称</td>
<td width="100" align="center">客户名称</td>
<td width="100" align="center">地址</td>
<td width="60" align="center">城市</td>
<td width="100" align="center">电话</td>
<td width="100" align="center">传真</td>
<td width="23"></td>
</tr>
</table>
</div>
<div id="TBody" onscroll="HeadScroll();">
<asp:Repeater id="rptTB" runat="server" EnableViewState="False">
<ItemTemplate>
<tr class="tr" id='<%# String.Format("TR{0}",Container.ItemIndex+1)%>' οnmοuseοver='rowover(<%# String.Format("TR{0}",Container.ItemIndex+1)%>);' οnmοuseοut='rowout(<%# String.Format("TR{0}",Container.ItemIndex+1)%>);' οnclick='rowclick(<%# String.Format("TR{0}",Container.ItemIndex+1)%>);'>
<td width="35" align="center" class="td"><%# Container.ItemIndex+1%></td>
<td width="100" align="center" class="td"><%# DataBinder.Eval(Container.DataItem,"CustomerID")%></td>
<td width="200" class="td"><%# DataBinder.Eval(Container.DataItem,"CompanyName")%></td>
<td width="100" class="td"><%# DataBinder.Eval(Container.DataItem,"ContactName")%></td>
<td width="100" class="td"><%# DataBinder.Eval(Container.DataItem,"Address")%></td>
<td width="60" align="center" class="td"><%# DataBinder.Eval(Container.DataItem,"City")%></td>
<td width="100" align="center" class="td"><%# DataBinder.Eval(Container.DataItem,"Phone")%></td>
<td width="100" align="center" class="td"><%# DataBinder.Eval(Container.DataItem,"Fax")%></td>
<td></td>
</tr>
</ItemTemplate>
<HeaderTemplate>
<table id="MyBodyTab" border="1" bordercolor="#cccccc" style="border-collapse:collapse;"
frame="void">
</HeaderTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater></div>
</div>
</form>
<script language="javascript">
function resetcolor()
{
var obj=document.getElementById("MyBodyTab");
for(var i = 0; i <obj.rows.length; i++)
{
obj.rows(i).style.background = (i%2)? "#ffffff" : "#efefef";
}
}
function rowover(obj) {
if (obj.style.background == "#2a63de")
return;
obj.style.background = "#3a6ea5";
obj.style.color = "#ffffff";
}
function rowout(obj) {
if (obj.style.background == "#2a63de")
return;
obj.style.background = (obj.sectionRowIndex % 2) ? "#ffffff" : "#efefef";
obj.style.color = "#000000";
}
function rowclick(obj) {
for (var i = 0; i < document.getElementById("MyBodyTab").rows.length; i++) //可以用折半查找以提高效率
{
with(document.getElementById("MyBodyTab").rows(i))
{
if (style.background == "#2a63de")
{
style.background = (i % 2) ? "#ffffff" : "#efefef";
style.color = "#000000";
break;
}
}
}
obj.style.background = "#2a63de";
obj.style.color = "#ffffff";
}
function HeadScroll()
{
document.getElementById("THead").scrollLeft = document.getElementById("TBody").scrollLeft;
}
function ChangWidth()
{
var e = event.srcElement;
if (e == undefined)
return;
if (e.tagName != "TD")
return;
var H = document.getElementById("MyHeadTab");
var B = document.getElementById("MyBodyTab");
var CellIndex;
for (var i = 0; i <H.rows(0).cells.length; i++)
if (H.rows(0).cells[i] == e)
{
CellIndex = i;
break;
}
var l = e.offsetLeft + 70;
if (e.style.cursor == "e-resize") //是改变列宽
{
e.setCapture();
document.onmousemove = function ()
{
if (e == undefined)
return;
e.style.cursor = "e-resize";
var w = event.x + document.getElementById("THead").scrollLeft - l;
if (w >= 5)
{
e.style.width = w;
if (B.rows.length < 1)
return;
B.rows(0).cells[CellIndex].style.width = w;
if(typeof(Y) != "undefined")
clearTimeout(Y);
if (B.rows.length < 50) //防止排序有Bug
Y = setTimeout("ChangWidthx("+ CellIndex +")" , 100);
else
Y = setTimeout("ChangWidthx("+ CellIndex +")" , 800);
}
HeadScroll();
}
document.onmouseup = function ()
{
if (e == undefined)
return;
e.releaseCapture();
e = undefined;
}
}
else
{
//排序
if (event.button == 1)
TdSort(CellIndex);
}
}
function ChangWidthx(CellIndex)
{
var B = document.getElementById("MyBodyTab");
var H = document.getElementById("MyHeadTab");
var w = document.getElementById("MyHeadTab").rows(0).cells[CellIndex].style.width;
for (var i = 0; i < B.rows.length; i++)
B.rows(i).cells[CellIndex].style.width = w;
B.rows(0).cells[B.rows(0).cells.length-1].style.width = 0;
if (B.offsetWidth < B.parentNode.parentNode.offsetWidth)
{
B.rows(0).cells[B.rows(0).cells.length-1].style.width = B.parentNode.parentNode.offsetWidth - B.offsetWidth + 20;
}
HeadScroll();
}
function ChangCursor()
{
var e = event.srcElement;
if (e.tagName != "TD")
return;
var x = event.x + document.getElementById("THead").scrollLeft; //此值在固定表头时要更改
var l = e.offsetLeft + 70;
if (x >= l + e.offsetWidth + 8)
e.style.cursor = "e-resize";
else
e.style.cursor = "default";
}
function TdSort(CellIndex)
{
var Text = "↑";
var S = 1; //向上排
var H = document.getElementById("MyHeadTab");
var This = H.rows(0).cells[CellIndex];
if (CellIndex==0 || This.innerText =="")
return; //没有数据或序号列，不排序
if (This.innerText.indexOf("↑") != -1)
{
Text = "↓";
S = 0;//向下排
}
for (var i = 0; i < H.rows(0).cells.length; i++)
{
var Ttitle = H.rows(0).cells[i];
if (Ttitle.innerText.indexOf("↑") != -1 || Ttitle.innerText.indexOf("↓") != -1)
{
Ttitle.innerText = Ttitle.innerText.substring(0 , Ttitle.innerText.length - 2);
break;
}
}
This.innerText += " "+ Text;
TSort(CellIndex , This.oType , S); //开始排序
}
function TSort(CellIndex , oType , Type)
{
var Temp = document.getElementById("MyBodyTab").tBodies[0].rows;
var A = new Array();
for (var i = 0; i < Temp.length; i++)
A[i] = Temp[i];
A.sort(SortSub(CellIndex , oType , Type));
for (var i = 0; i < A.length; i++)
document.getElementById("MyBodyTab").tBodies[0].appendChild(A[i]);
}
function parseStr(s)
{
return String(s).toUpperCase();
}
function parseDate(s)
{
return Date.parse(s.replace(/\-/g, '/'));
}
function SortSub(CellIndex , oType , Type)
{
var ThisType = String;
if (oType == "Num")
ThisType = Number;
else if (oType == "Date")
ThisType = parseDate;
else if (oType == "Str")
ThisType = parseStr;
return function (x,y)
{
if (ThisType(x.cells[CellIndex].innerText) > ThisType(y.cells[CellIndex].innerText))
return Type ? 1 : -1;
if (ThisType(x.cells[CellIndex].innerText) < ThisType(y.cells[CellIndex].innerText))
return Type ? -1 : 1;
return 0;
};
}
</script>
</body>
</HTML>
Table.aspx.cs
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using Microsoft.Practices.EnterpriseLibrary.Configuration;
using Microsoft.Practices.EnterpriseLibrary.Common;
using Microsoft.Practices.EnterpriseLibrary.Data;
namespace JavaScriptDemo
{
/**//// <summary>
/// Table 的摘要说明。
/// </summary>
public class Table : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Repeater rptTB;
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
if(!Page.IsPostBack) {
Database db = DatabaseFactory.CreateDatabase();
string strSel="select * from Customers";
DataSet ds = db.ExecuteDataSet(CommandType.Text,strSel);
this.rptTB.DataSource =ds;
this.rptTB.DataBind();
}
}
Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/**//// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
原本想把javascript脚本提出来单独写在一个文件中，可是提出来后一直出错，找不到错误在哪里，只好先这样放着了。
转载于:https://www.cnblogs.com/yknb/archive/2006/09/21/510779.html
总结
以上是生活随笔为你收集整理的一个实用的表格（锁定表头，可调整单元格大小，可排序）的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 利用SQL中的递归返回多行数据的连接
- 下一篇： InvokeWebServiceActi