當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

一个实用的表格（锁定表头，可调整单元格大小，可排序）

發布時間：2024/10/8 编程问答 154 豆豆

生活随笔收集整理的這篇文章主要介紹了一个实用的表格（锁定表头，可调整单元格大小，可排序）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

昨天在網上找到一個不錯的表格顯示，該表格可以鎖定表頭，可調整單元格的大小，同時還可以對數據進行排序，顯示效果如下：

原代碼：

<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0?Transitional//EN">

<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中的递归返回多行数据的连接
下一篇： SQLServer存储过程/函数加/解密