&#106avascript实现的数据表格：冻结列、调整列宽和客户端排序

客户端|排序|数据|数据表格

根据网上的一些脚本改的，大家看一下，应该对开发有用，准备在.Net下写个Server-Side端控件
把下面的代码另存为.htm文件后看下效果。

<HTML><HEAD>
<TITLE>数据表格</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>BODY {
    FONT: 12px 细明体; CURSOR: default
}
TD {
    FONT: 12px 细明体; CURSOR: default
}
.title {
    BORDER-RIGHT: #555 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 4px; BACKGROUND: LightBlue; PADDING-BOTTOM: 4px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; CURSOR: hand; PADDING-TOP: 4px; BORDER-BOTTOM: #555 1px solid; WHITE-SPACE: nowrap
}
.cdata {
    PADDING-RIGHT: 3px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; OVERFLOW: hidden; PADDING-TOP: 3px; BORDER-BOTTOM: #ddd 1px solid; WHITE-SPACE: nowrap
}
.coolMenu
{
 position: absolute;
 height: 1px;
 width: 1px;
 font-size: 9pt;
 background-color: menu;
 border-top: 2px outset buttonhighlight;
 border-left: 2px outset buttonhighlight;
 border-bottom: 1px solid buttonshadow;
 border-right: 1px solid buttonshadow;
 visibility: hidden;
}
.coolMenu .coolMenuItem
{
 height: 20px;
 margin: 1px;
 padding-right: 10px;
 cursor: hand;
 overflow: hidden;
}
.coolMenu .coolMenuItem IMG
{
 vertical-align: middle;
 margin-left: 1px;
 margin-right: 6px;
}
.coolMenu .coolMenuItem .coolMenuMore
{
 font-family: webdings;
}
.coolMenu .coolMenuDivider
{
 border: 1px inset;
 border-top-color: buttonshadow;
 border-bottom-color: buttonhighlight;
 height: 2px;
 overflow: hidden;
 margin-left: 2px;
 margin-top: 2px;
 margin-bottom: 2px;
}
.sinput
{
 BORDER-BOTTOM: black 1px solid;
 BORDER-LEFT: 0px;
 BORDER-RIGHT: 0px;
 BORDER-TOP: 0px; 
 FONT-FAMILY: 宋体,Arial;
 FONT-SIZE: 9pt;
 WIDTH: 15pt;
 height: 12pt;
}

</STYLE>
<SCRIPT language=JavaScript>
// 栏位标题 ( 栏位名称 # 栏位宽度 # 资料对齐 #数据类型（主要分三种数据类型：文本、数值、日期）)
var DataTitles=new Array(
"歌手 / 团体#90 #left#文本"  ,
"专辑名称   #130#left#文本"  ,
"发行公司   #110#left#文本"  ,
"本周排名   #58 #center#数值",
"排名状况   #58 #center#文本",
"上周排名   #58 #center#数值",
"上榜周数   #58 #center#数值",
"最高名次   #58 #center#数值",
"销售百分比 #70 #center#数值",
"发行日期 #100 #right#日期"
)
// 栏位资料 ( 二维阵列 )
var DataFields=new Array()
DataFields[0] =new Array("萧亚轩萧亚轩萧亚轩萧亚轩萧亚轩萧亚轩萧亚轩萧亚轩"  ,"爱的主打歌-吻"   ,"维京 Virgin"    ,"1" ,"持平"  ,"1" ,"2","1" ,"2.9 %", "2004-1-1")
DataFields[1] =new Array("张惠妹"  ,"发烧"            ,"华纳 Warner"    ,"2" ,"持平"  ,"2" ,"2","2" ,"2.1 %", "2004-2-10")
DataFields[2] =new Array("陶吉吉"  ,"黑色柳丁"        ,"全员集合 Shock" ,"3" ,"持平"  ,"3" ,"5","1" ,"1.8 %", "2004-2-09")
DataFields[3] =new Array("S.H.E"   ,"美丽新世界"      ,"华研 HIM"       ,"4" ,"持平"  ,"4" ,"6","1" ,"1.2 %", "2003-1-1")
DataFields[4] =new Array("艾薇儿"  ,"展翅高飞"        ,"博德曼 BMG"     ,"5" ,"新进榜","-" ,"1","5" ,"1.1 %", "2004-4-4")
DataFields[5] =new Array("任贤齐"  ,"一个任贤齐"      ,"滚石 Rock"      ,"6" ,"新进榜","-" ,"1","6" ,"1.0 %", "2002-10-11")
DataFields[6] =new Array("范逸臣"  ,"范逸臣第一张专辑","丰华 Forward"   ,"7" ,"持平"  ,"7" ,"2","7" ,"0.9 %", "2002-12-11")
DataFields[7] =new Array("谢霆锋"  ,"无形的他全精选"  ,"新力 Sony"      ,"8" ,"下跌"  ,"6" ,"4","4" ,"0.9 %", "2004-1-1")
DataFields[8] =new Array("周蕙"    ,"寂寞城市"        ,"福茂 Decca"     ,"9" ,"下跌"  ,"5" ,"3","5" ,"0.8 %", "2004-1-1")
DataFields[9] =new Array("周杰伦"  ,"八度空间"        ,"博德曼 BMG"     ,"10","下跌"  ,"8" ,"8","1" ,"0.8 %", "2004-1-1")
DataFields[10]=new Array("酷玩乐团","玩过头"          ,"科艺百代 EMI"   ,"11","上升"  ,"16","2","11","0.7 %", "2004-1-1")
DataFields[11]=new Array("张震岳"  ,"等我有一天"      ,"魔岩 Magicstone","12","新进榜","-" ,"1","12","0.6 %", "2004-1-1")
DataFields[12]=new Array("堂本刚"  ,"红与蓝"          ,"艾回 Avex"      ,"13","新进榜","-" ,"1","13","0.6 %", "2004-1-1")
DataFields[13]=new Array("ENERGY"  ,"COME ON"         ,"环球 Universal" ,"14","下跌"  ,"10","9","5" ,"0.6 %", "2004-1-1")
DataFields[14]=new Array("陈冠希"  ,"TRANSITION"      ,"艾回 Avex"      ,"15","下跌"  ,"9" ,"3","5" ,"0.4 %", "2004-1-1")
DataFields[15]=new Array("合辑"    ,"MTV 嘻哈大师"    ,"环球 Universal" ,"16","下跌"  ,"12","3","12","0.4 %", "2004-1-1")
</SCRIPT>
<SCRIPT language=JavaScript>
var BoxWidth = 480    // 资料表显示宽度 ( 不含滚动条)
var ShowLine = 10    // 资料表显示列数
var RsHeight = 21    // 资料列高度
var LockCols = 1    // 要锁定的栏位数 ( 由左至右 )
var RowColor = "Linen"
var RowAlternativeColor = "#d9ffd3"
var RowMouseOverColor = "LightSteelBlue"
var RowSelectedColor = "CornflowerBlue"

//记录每次右击的列的索引。
var columnRC = 0

//记录被单击过的行的索引。
var rowC = -1;

 

function SetRowColor(sRowIndex, sColor)
{
 for(i=0;i<leftTable.rows[sRowIndex].cells.length;i++)
  leftTable.rows[sRowIndex].cells[i].style.backgroundColor = sColor;

 for(i=0;i<rightTable.rows[sRowIndex].cells.length;i++)
  rightTable.rows[sRowIndex].cells[i].style.backgroundColor = sColor;
}

function ResetRowColor(sRowIndex)
{
 var sColor = null;
 if (sRowIndex % 2 ==0)
  sColor = RowColor;
 else
  sColor = RowAlternativeColor;
  
 SetRowColor(sRowIndex, sColor);
}

function SortTableAsc()
{
 var cTitle=DataTitles[columnRC].split("#");
 switch(cTitle[3])
 {
  case "文本" :
   alert("暂时不支持文本排序！汉字的拼音问题尚未解决！");
   break;
  case "数值" :
   var minIndex = 0;
   var tempArray = new Array();
   for(i=0;i<DataFields.length;i++)
   {
    minIndex = i;
    var leftMin = parseFloat(DataFields[i][columnRC]);
    for(j=i+1;j<DataFields.length;j++)
    {
     if (leftMin>parseFloat(DataFields[j][columnRC]))
     {
      leftMin = parseFloat(DataFields[j][columnRC]);
      minIndex = j;
     }
    }
    if (minIndex != i)
    {
     for(h=0;h<DataFields[i].length;h++)
     {
      tempArray[h] = DataFields[i][h];
      DataFields[i][h] = DataFields[minIndex][h];
      DataFields[minIndex][h] = tempArray[h];
     }
    }
   }
   ApplyData();
   break;
  case "日期" :
   var minIndex = 0;
   var tempArray = new Array();
   for(i=0;i<DataFields.length;i++)
   {
    //日期必须是yyyy-mm-dd格式的。
    minIndex = i;
    var leftMin = DataFields[i][columnRC].split("-");
    for(j=i+1;j<DataFields.length;j++)
    {
     var currentDate = DataFields[j][columnRC].split("-");
     if ( ( parseInt(leftMin[0]) > parseInt(currentDate[0]) ) || ( ( leftMin[0] == currentDate[0] ) && ( parseInt(leftMin[1]) > parseInt(currentDate[1]) ) ) || ( ( leftMin[0] == currentDate[0] ) && ( leftMin[1] == currentDate[1] ) && ( parseInt(leftMin[2]) > parseInt(currentDate[2]) ) ) )
     {
      leftMin[0] = currentDate[0];
      leftMin[1] = currentDate[1];
      leftMin[2] = currentDate[2];
      minIndex = j;
     }
    }
    if (minIndex != i)
    {
     for(h=0;h<DataFields[i].length;h++)
     {
      tempArray[h] = DataFields[i][h];
      DataFields[i][h] = DataFields[minIndex][h];
      DataFields[minIndex][h] = tempArray[h];
     }
    }
   }
   ApplyData();
   break;
 }
}

function SortTableDesc()
{
 var cTitle=DataTitles[columnRC].split("#");
 switch(cTitle[3])
 {
  case "文本" :
   alert("暂时不支持文本排序！汉字的拼音问题尚未解决！");
   break;
  case "数值" :
   var minIndex = 0;
   var tempArray = new Array();
   for(i=0;i<DataFields.length;i++)
   {
    minIndex = i;
    var leftMin = parseFloat(DataFields[i][columnRC]);
    for(j=i+1;j<DataFields.length;j++)
    {
     if (leftMin<parseFloat(DataFields[j][columnRC]))
     {
      leftMin = parseFloat(DataFields[j][columnRC]);
      minIndex = j;
     }
    }
    if (minIndex != i)
    {
     for(h=0;h<DataFields[i].length;h++)
     {
      tempArray[h] = DataFields[i][h];
      DataFields[i][h] = DataFields[minIndex][h];
      DataFields[minIndex][h] = tempArray[h];
     }
    }
   }
   ApplyData();
   break;
  case "日期" :
   var minIndex = 0;
   var tempArray = new Array();
   for(i=0;i<DataFields.length;i++)
   {
    //日期必须是yyyy-mm-dd格式的。
    minIndex = i;
    var leftMin = DataFields[i][columnRC].split("-");
    for(j=i+1;j<DataFields.length;j++)
    {
     var currentDate = DataFields[j][columnRC].split("-");
     if ( ( parseInt(leftMin[0]) < parseInt(currentDate[0]) ) || ( ( leftMin[0] == currentDate[0] ) && ( parseInt(leftMin[1]) < parseInt(currentDate[1]) ) ) || ( ( leftMin[0] == currentDate[0] ) && ( leftMin[1] == currentDate[1] ) && ( parseInt(leftMin[2]) < parseInt(currentDate[2]) ) ) )
     {
      leftMin[0] = currentDate[0];
      leftMin[1] = currentDate[1];
      leftMin[2] = currentDate[2];
      minIndex = j;
     }
    }
    if (minIndex != i)
    {
     for(h=0;h<DataFields[i].length;h++)
     {
      tempArray[h] = DataFields[i][h];
      DataFields[i][h] = DataFields[minIndex][h];
      DataFields[minIndex][h] = tempArray[h];
     }
    }
   }
   ApplyData();
   break;
 }
}

function WriteTable(){    // 写入表格
var iBoxWidth=BoxWidth
var NewHTML="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>\
<td><div style=\"width:100%;overflow-x:scroll\">\
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" id=\"leftHead\"><tr>"
for(i=0;i<DataTitles.length;i++){
  if(i<LockCols){
    var cTitle=DataTitles[i].split("#")
    iBoxWidth-=cTitle[1]
    NewHTML+="<td><div class=\"title\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px\"  align=\"" + cTitle[2] + "\" oncontextmenu=\"HeadRightClick()\">"+cTitle[0]+"</div></td>"
  }
}
NewHTML+="</tr>\
<tr><td colspan=\""+LockCols+"\">\
<div id=\"DataFrame1\" style=\"position:relative;width:100%;overflow:hidden\">\
<div id=\"DataGroup1\" style=\"position:relative\"></div></div>\
</td></tr></table></div></td>\
<td valign=\"top\"><div style=\"width:"+iBoxWidth+"px;overflow-x:scroll\">\
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" id=\"rightHead\"><tr>"
for(i=0;i<DataTitles.length;i++){
  if(i>=LockCols){
    var cTitle=DataTitles[i].split("#")
    NewHTML+="<td><div class=\"title\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px\"  align=\"" + cTitle[2] + "\" oncontextmenu=\"HeadRightClick()\">"+cTitle[0]+"</div></td>"
  }
}
NewHTML+="</tr>\
<tr><td colspan=\""+(DataTitles.length-LockCols)+"\">\
<div id=\"DataFrame2\" style=\"position:relative;width:100%;overflow:hidden\">\
<div id=\"DataGroup2\" style=\"position:relative\"></div>\
</div></td></tr></table>\
</div></td><td valign=\"top\">\
<div id=\"DataFrame3\" style=\"position:relative;background:#000;overflow-y:scroll\" onscroll=\"SYNC_Roll()\">\
<div id=\"DataGroup3\" style=\"position:relative;width:1px;visibility:hidden\"></div>\
</div></td></tr></table>"
DataTable.innerHTML=NewHTML
ApplyData()
}
function ApplyData(){    // 写入资料
var NewHTML="<table id=\"leftTable\" onMouseOver=\"overcolor()\" onClick=\"clickColor()\" onMouseOut=\"outcolor()\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"
for(i=0;i<DataFields.length;i++){
if (i %2 == 0)
  NewHTML+="<tr bgcolor=\"" + RowColor + "\">"
else
  NewHTML+="<tr bgcolor=\"" + RowAlternativeColor + "\">"
  for(j=0;j<DataTitles.length;j++){
    if(j<LockCols){
      var cTitle=DataTitles[j].split("#")
      NewHTML+="<td><div class=\"cdata\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px;text-align:"+cTitle[2]+"\">"+DataFields[i][j]+"</div></td>"
    }
  }
  NewHTML+="</tr>"
}
NewHTML+="</table>"
DataGroup1.innerHTML=NewHTML

var NewHTML="<table id=\"rightTable\" onMouseOver=\"overcolor()\" onClick=\"clickColor()\" onMouseOut=\"outcolor()\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"
for(i=0;i<DataFields.length;i++){
if (i %2 == 0)
  NewHTML+="<tr bgcolor=\"" + RowColor + "\">"
else
  NewHTML+="<tr bgcolor=\"" + RowAlternativeColor + "\">"
  for(j=0;j<DataTitles.length;j++){
    if(j>=LockCols){
      var cTitle=DataTitles[j].split("#")
      NewHTML+="<td><div class=\"cdata\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px;text-align:"+cTitle[2]+"\">"+DataFields[i][j]+"</div></td>"
    }
  }
  NewHTML+="</tr>"
}
NewHTML+="</table>"
DataGroup2.innerHTML=NewHTML
DataFrame1.style.pixelHeight=RsHeight*ShowLine
DataFrame2.style.pixelHeight=RsHeight*ShowLine
DataFrame3.style.pixelHeight=RsHeight*ShowLine+RsHeight
DataGroup3.style.pixelHeight=RsHeight*(DataFields.length+1)
}

function ResetTable(){

var iBoxWidth=0
for(i=0;i<DataTitles.length;i++){
  if(i<(columnRC+1)){
    var cTitle=DataTitles[i].split("#")
    iBoxWidth+=parseInt(cTitle[1])
  }
}
if(iBoxWidth>BoxWidth){
  var Sure=confirm("\n锁定栏位的宽度大於资料表显示的宽　　\n\n度，这可能会造成版面显示不正常。\n\n\n您确定要继续吗？")
}else{
  Sure=true
}
if(Sure){
  LockCols=(LockCols==columnRC+1)?0:columnRC+1
  WriteTable()
}
}

function SYNC_Roll(){
DataGroup1.style.posTop=-DataFrame3.scrollTop
DataGroup2.style.posTop=-DataFrame3.scrollTop
}

function clickColor()
{
 try
 {
    var oEl = event.srcElement;
 if (oEl)
    if (oEl.tagName == "DIV")
    {
        try
        {
            oEl = oEl.parentElement.parentElement;
        }
        catch (e)
        {
            return;
        }
    }
    if (oEl.tagName == "TD")
        oEl = oEl.parentElement;

 var sindex = oEl.rowIndex;
 
 SetRowColor(sindex, RowSelectedColor);
 
 if (rowC >= 0) 
  if (rowC != sindex)
   ResetRowColor(rowC);
   
 rowC = sindex;
 }
 catch (e)
 {}
}

function overcolor()
{
    var oEl = event.srcElement;
 if (oEl)
    if (oEl.tagName == "DIV")
    {
        try
        {
            oEl = oEl.parentElement.parentElement;
        }
        catch (e)
        {
            return;
        }
    }
    if (oEl.tagName == "TD")
        oEl = oEl.parentElement;

 var sindex = oEl.rowIndex;
 
 if (rowC >= 0)
  if (sindex == rowC)
   return;
 
 SetRowColor(sindex, RowMouseOverColor);
}

function outcolor()
{
    var oEl = event.srcElement;
 if (oEl)
    if (oEl.tagName == "DIV")
    {
        try
        {
            oEl = oEl.parentElement.parentElement;
        }
        catch (e)
        {
            return;
        }
    }
    if (oEl.tagName == "TD")
        oEl = oEl.parentElement;

 var sindex = oEl.rowIndex;
 
  if (rowC >= 0)
  if (sindex == rowC)
   return;
   
 ResetRowColor(sindex); 
}

function HeadRightClick()
{
 var ev = window.event;
 var el = ev.srcElement;
 if (el.tagName == "DIV")
 {
  showMenu(ev.clientX, ev.clientY);
  ev.cancelBubble = true;
  ev.returnValue = false;
  var ep = el.parentElement;
  columnRC = ep.cellIndex;
  ep = el.parentElement.parentElement.parentElement.parentElement;
  if (ep.tagName == "TABLE")
  {
   if (ep.id == "rightHead")
    columnRC += LockCols;
  }
 }
}

function showMenu(x, y)
{
    var intRightEdge = window.document.body.clientWidth - x;
    var intBottomEdge = window.document.body.clientHeight - y;
    var intScrollLeft = window.document.body.scrollLeft + x;
    var intScrollTop = window.document.body.scrollTop + y;

    if (intRightEdge < objHeadMenu.offsetWidth)
        objHeadMenu.style.left = intScrollLeft - objHeadMenu.offsetWidth;
    else
        objHeadMenu.style.left = intScrollLeft;

    if (intBottomEdge < objHeadMenu.offsetHeight)
        objHeadMenu.style.top = intScrollTop - objHeadMenu.offsetHeight;
    else
        objHeadMenu.style.top = intScrollTop;

    objHeadMenu.style.zIndex = 50;
 
 objHeadMenu.style.filter = "blendTrans(duration=0.50) progid:DXImageTransform.Microsoft.Shadow(color=#323232, direction=135, strength=3)";
 
 if (objHeadMenu.filters.blendTrans.status != 2)
 {
  objHeadMenu.filters.blendTrans.apply();
  objHeadMenu.style.visibility = "visible";
  objHeadMenu.filters.blendTrans.play();
 }
}

function hideMenu()
{
 objHeadMenu.style.filter = "blendTrans(duration=0.50) progid:DXImageTransform.Microsoft.Shadow(color=#323232, direction=135, strength=3)";
 if (objHeadMenu.filters.blendTrans.status != 2)
 {
  objHeadMenu.filters.blendTrans.apply();
  objHeadMenu.style.visibility = "hidden";
  objHeadMenu.filters.blendTrans.play();
 }
}

//加列宽
function SetCWP(valWidth)
{
 var cTitle = DataTitles[columnRC].split("#");
 var cWidth = parseInt(cTitle[1]) + parseInt(valWidth);
 DataTitles[columnRC] = cTitle[0] + "#" + cWidth + "#" + cTitle[2] + "#" + cTitle[3];
 WriteTable();
}

//减列宽
function SetCWM(valWidth)
{
 var cTitle = DataTitles[columnRC].split("#");
 var cWidth = parseInt(cTitle[1]) - parseInt(valWidth);
 if (cWidth <= 0) return;
 DataTitles[columnRC] = cTitle[0] + "#" + cWidth + "#" + cTitle[2] + "#" + cTitle[3];
 WriteTable();
}

/*
 右键菜单上的两个调整列宽的文本框的KeyDown事件，用于捕捉"Enter"时调整列宽并隐藏菜单
*/
function CWKeyDown()
{
 if (event.keyCode == 13)
 {
 var oEl = event.srcElement;
 if (oEl.id == "txtCWPlus")
  SetCWP(txtCWPlus.value);
  
 if (oEl.id == "txtCWMinus")
  SetCWM(txtCWMinus.value);
 
 hideMenu();
 }
}

function createMenu()
{
  var txtHTML = "<div class=\"coolMenuItem\" style='padding-top: 1px;' onclick=\"SortTableAsc();hideMenu();\"><img src=\"images/asc.gif\" width=\"16\" height=\"16\">按升序排序</div>";
  txtHTML += "<div class=\"coolMenuItem\" style='padding-top: 1px;' onclick=\"SortTableDesc();hideMenu();\"><img src=\"images/desc.gif\" width=\"16\" height=\"16\">按降序排序</div>";
  txtHTML +="<div class=\"coolMenuDivider\"></div>";
  txtHTML += "<div class=\"coolMenuItem\" style='padding-top: 1px;' onclick=\"ResetTable();hideMenu();\"><img src=\"images/blank.gif\" width=\"16\" height=\"16\">锁定列</div>";
  txtHTML += "<div class=\"coolMenuDivider\"></div>";
  txtHTML += "<div class=\"coolMenuItem\" style='padding-top: 1px;' onClick=\"SetCWP(txtCWPlus.value);\" onMouseOver=\"txtCWPlus.focus();\"><img src=\"images/blank.gif\" width=\"16\" height=\"16\">列宽 + <input type=\"text\" id=\"txtCWPlus\" class=\"sinput\" value=\"20\" onKeyDown=\"CWKeyDown();\"> px</div>";
  txtHTML += "<div class=\"coolMenuItem\" style='padding-top: 1px;' onclick=\"SetCWM(txtCWMinus.value);\" onMouseOver=\"txtCWMinus.focus()\"><img src=\"images/blank.gif\" width=\"16\" height=\"16\">列宽 - <input type=\"text\" id=\"txtCWMinus\" class=\"sinput\" value=\"20\" onKeyDown=\"CWKeyDown();\"> px</div>";
     objHeadMenu.className = "coolMenu";
     objHeadMenu.innerHTML = txtHTML;
     window.document.body.insertAdjacentElement("afterBegin", objHeadMenu);
}

</SCRIPT>
<META content="MSHTML 6.00.2800.1170" name=GENERATOR>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</HEAD>
<BODY >
<CENTER>
  <H4> </H4>
  <!--// 资料表 ( 开始 ) //-->
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: white 2px inset; BORDER-TOP: white 2px inset; BORDER-LEFT: white 2px inset; BORDER-BOTTOM: white 2px inset; BACKGROUND-COLOR: scrollbar">
<DIV id=DataTable>
</DIV></TD></TR></TBODY></TABLE><!--// 资料表 ( 结束 ) //-->
  <P> </P>
  <div id="objHeadMenu" style="position:absolute; width:124px; height:13px; z-index:1; left: 525px; top: 164px; visibility: hidden;" oncontextmenu="return false;"></div>
  </CENTER></BODY></HTML>

时间： 2024-09-29 14:30:30

&#106avascript实现的数据表格：冻结列、调整列宽和客户端排序的相关文章

wps表格中怎样调整列宽和行高？

行高设置方法一:选中需要调节行高的整行,右击该行选择"行高",在弹出的行高窗口进行行高设定然后点击确定.       行高设置方法二:将光标移至行号分割线上,上下拖动分割线进行行高调整.     列宽设置方法一:选中需要调节列宽的整列,右击该列选择"列宽",在弹出的列宽窗口进行列宽设定然后点击确定,       列宽设置方法二:将光标移至列号分割线上,左右拖动分割线进行列宽调整.  

php将HTML表格每行每列转为数组实现采集表格数据的方法

 本文实例讲述了php将HTML表格每行每列转为数组实现采集表格数据的方法.分享给大家供大家参考.具体如下: 下面的php代码可以将HTML表格的每行每列转为数组,采集表格数据 <?php function get_td_array($table) { $table = preg_replace("'<table[^>]*?>'si","",$table); $table = preg_replace("'<tr[^>]

批量修改WPS或excel表格一行或一列数据

比如我们做好一个表格,填好了数据,现在想修改其中的一列或者一行,例如:想在A列原来的数据的基础上减10,不要告诉我你是一个一个地修改哦,数据少了还可以,数据多了那就累死了很麻烦,那么如何批量修改一行或者一列的数据呢? 1.第一步: 在想要修改的列(假设为A列)的旁边,插入一个临时的新列(为B列),并在B列的第一个单元格(B1)里输入"10". 2.把鼠标放在B1的右下角,待其变成 十字形 并按住 "ctrl" 住下拉直到所需的数据长度,此时B列所有的数据都为10.

Excel表格怎么把一列数据转换为多行多列数据

  下面为你介绍Excel表格怎么把一列数据转换为多行多列数据?不需要复杂的公式输入,只是简单的鼠标操作即可完成. 1.将一列60个数据转换为5行12列. 首先,在B1格输入"A1",B2格输入"A13",然后选中B1.B2,将鼠标移到选中框的右下角(此时鼠标变为"+"形,下同),按住左键不放将框下拉至B5处.此时B3.B4.B5格将分别填充"A25"."A37"."A49". 列表格展

模糊-jsp中怎么仿百度搜索栏，并且下拉数据表格多列。

问题描述 jsp中怎么仿百度搜索栏,并且下拉数据表格多列. jsp中怎么仿百度搜索栏,并且下拉数据表格多列.可以支持模糊搜索 解决方案 http://tangyongjunbk.blog.163.com/blog/static/128389013201282794920753/ 解决方案二: 参考: http://tieba.baidu.com/p/2721861634 http://www.oschina.net/code/snippet_238386_11799 解决方案三: http://

jquery easy ui得到的表格数据后面多出来一列。大神们怎么去掉呀？

问题描述 jquery easy ui得到的表格数据后面多出来一列.大神们怎么去掉呀? 解决方案 fit:true,fitColumns:true <table class="easyui-datagrid" data-options="url:'datagrid_data1.json',fit:true,fitColumns:true">

表格拖动调整列宽JQuery代码(1/2)

表格拖动调整列宽jquery代码 为了能在所有需要该效果的页面使用,并且不需要更改页面任何html,我把所有的代码整合在  $(document).ready(function() {});  中,并写入一个独立的js文件. 用一个1像素宽的div来模拟一条竖线,在页面载入后添加到body元素中 $(document).ready(function() {      $("body").append("<div id="line" style=&qu

excel-C# 中怎么获取Excel 中的数据。 看了很多例子，不明白怎么获得表格中行数和列数？

问题描述 C# 中怎么获取Excel 中的数据. 看了很多例子,不明白怎么获得表格中行数和列数? 使用CONSOLE APPLICATION 建立的工程,求大神指点! 解决方案 通过流读取行和列,再填充带DataSet中.

JQuery表格拖动调整列宽效果(自己动手写的)_jquery

类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动手尝试实现,在此分享下小小的成果. 首先需要如图所示的鼠标图标文件,在自己的硬盘中搜索*.cur,肯定能找到. 为了能在所有需要该效果的页面使用,并且不需要更改页面任何HTML,我把所有的代码整合在 $(document).ready(function() {}); 中,并写入一个独立的JS文件.