锁定行头和列头的表格组件

转载 2006年05月20日 01:05:00
 

当报表比较大时,在Web上查看内容会很不方便,如果可以象Excel那样锁定报表的行头和列头就好了……

最近闲着没事,写了个锁定报表行头和列头的组件,用法也挺简单:
1、在页面中引入风格单定义
<style>
.LockHeadTable {behavior:url(LockHeadTable.htc)}
</style>
2、在需要锁定行列头的表格定义中添加语句“class="LockHeadTable" ROWNUM="锁定行数" COLNUM="锁定列数"”就OK了。例:
<table class="LockHeadTable" ROWNUM=2 COLNUM=3 Border='1' width='1510' style={border-collapse:collapse;table-layout:fixed}>

忘说了,在点击行标题时可以对数据进行排序的。

源代码:

LockHeadTable.htc(组件程序)

<!--//
锁定行头和列头的表格组件 Version 1.0
2005年01月19日 By Stone (http://blog.csdn.net/hstone)

这段脚本可以免费使用于任何非商业用途,引用时请保留本段说明。
//-->
<PUBLIC:COMPONENT>
 <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="DoInit()" />
 
 <PUBLIC:PROPERTY NAME="ROWNUM" />
 <PUBLIC:PROPERTY NAME="COLNUM" />
 
 <script>
 var rowHead = null, colHead = null;

 function DoInit() {
  ROWNUM = (ROWNUM==null?0:parseInt(ROWNUM, 10));
  COLNUM = (COLNUM==null?0:parseInt(COLNUM, 10));

  var i, j;
  
  //复制行表头
  rowHead = element.cloneNode(true);
  for (i=ROWNUM; i<rowHead.rows.length;)
   rowHead.deleteRow(ROWNUM);
  //alert(rowHead.outerHTML);
  
  //复制列表头
  colHead = element.cloneNode(true);
  for (i=0; i<ROWNUM; i++)
   colHead.deleteRow(0);
  for (i=0; i<colHead.rows.length; i++) {
   rowItem = colHead.rows(i);
   for (j=COLNUM; j<rowItem.cells.length;)
    rowItem.deleteCell(rowItem.cells.length - 1);
  }
  //alert(colHead.outerHTML);
  
  //设置行表头属性
  rowHead.id += rowHead.uniqueID;
  rowHead.className = "";
  rowHead.style.position = "absolute";
  rowHead.style.top = getPosTop(element);
  rowHead.style.left = getPosLeft(element);
  
  //设置行标题排序
  for (i=0; i<ROWNUM; i++) {
   rowItem = rowHead.rows(i);
   for (j=0; j<rowItem.cells.length; j++) {
    cellItem = rowItem.cells(j);
    if (cellItem.rowSpan==ROWNUM-i) {
     cellItem.style.cursor = "hand";
     cellItem.sortAsc = true;
     cellItem.onclick = sortTable;
    }
   }
  }

  //计算、设置列表头属性
  var colHeadWidth = 0;
  var rowItem = element.rows(ROWNUM);
  for (i=0; i<colHead.rows.length; i++) {
   colHeadWidth = 0;
   for (j=0; j<COLNUM; j++) {
    colHeadWidth += parseInt(rowItem.cells(j).offsetWidth, 10);
    colHead.rows(i).cells(j).style.width = rowItem.cells(j).offsetWidth;
   }
  } 
  
  colHead.id += colHead.uniqueID;
  colHead.className = "";
  colHead.style.width = colHeadWidth;
  colHead.style.position = "absolute";
  colHead.style.top = getPosTop(element.rows(ROWNUM));
  colHead.style.left = getPosLeft(element);
  
  //添加表头对象
  parent.document.body.appendChild(colHead);
  parent.document.body.appendChild(rowHead);
  
  //增加body滚动事件处理
  parent.document.body.onscroll = bodyonscroll;
 }
 //body滚动事件处理
 function bodyonscroll() {
  var bodyscrolltop = parseInt(parent.document.body.scrollTop, 10),
   bodyscrollleft = parseInt(parent.document.body.scrollLeft, 10),
   elementtop = getPosTop(element),
   elementleft = getPosLeft(element),
   elementwidth = parseInt(element.offsetWidth, 10),
   elementheight = parseInt(element.offsetHeight, 10);
  rowHead.style.top = elementtop + ((bodyscrolltop>elementtop && bodyscrolltop<elementtop + elementheight)?bodyscrolltop:0);
  colHead.style.left = elementleft + ((bodyscrollleft>elementleft && bodyscrollleft<elementleft + elementwidth)?bodyscrollleft:0);
 }
 
 //获取HTML对象在窗口中的位置,左边距(对象无offsetParent返回值是null)
 function getPosLeft(obj) {
  return ((obj==null)?0:parseInt(obj.offsetLeft) + getPosLeft(obj.offsetParent));
 }
 //获取HTML对象在窗口中的位置,顶距((对象无offsetParent返回值是null)
 function getPosTop(obj) {
  return (obj==null)?0:parseInt(obj.offsetTop) + getPosTop(obj.offsetParent);
 }
 //排序
 function sortTable() {
  var objCol = event.srcElement;
  if (objCol.tagName == "TD") {
   var intCol = objCol.cellIndex;
   objCol.sortAsc = !objCol.sortAsc;

   var i,j,boltmp;
   for (i = ROWNUM; i < element.rows.length; i++)
    for (j = i + 1; j < element.rows.length; j++) {
     boltmp = (element.rows(i).cells(intCol).innerText >= element.rows(j).cells(intCol).innerText);
     if ((objCol.sortAsc && !boltmp) || (!objCol.sortAsc && boltmp)) {
      element.moveRow(j, i);
      colHead.moveRow(j - ROWNUM, i - ROWNUM);
     }
    }
  }
 }
 </script>
</PUBLIC:COMPONENT>


LockHeadTable.html(演示页面)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>LockHeadTableDemo</title>
<style>
TD  {
 font-family:宋体;
 font-size:13px;
 text-align:right
 }
TD.tdrow {
 font-family:宋体;
 color:#993300;
 background-color:#FFF8DC;
 font-size:14px;
 text-align:center;
 vertical-align:bottom
 }
TD.tdcol {
 font-family:宋体;
 color:blue;
 background-color:#FFF8DC;
 font-size:14px;
 text-align:left
 }

.LockHeadTable {behavior:url(LockHeadTable.htc)}
</style>
</head>

<body>
<table class="LockHeadTable" ROWNUM=2 COLNUM=3 Border='1' width='1510' style={border-collapse:collapse;table-layout:fixed}>
<tr height='20'>
 <td class='tdrow' rowspan='2' width='100'>字段01</td>
 <td class='tdrow' rowspan='2' width='60'>字段02</td>
 <td class='tdrow' rowspan='2' width='50'>字段03</td>
 <td class='tdrow' rowspan='2' width='100'>字段04</td>
 <td class='tdrow' colspan='5' width='500'>字段05</td>
 <td class='tdrow' colspan='3' width='300'>字段06</td>
 <td class='tdrow' colspan='3' width='300'>字段07</td>
 <td class='tdrow' rowspan='2' width='100'>字段08</td>
</tr>
<tr heigth='20'>
 <td class='tdrow' width='100'>字段01</td>
 <td class='tdrow' width='100'>字段02</td>
 <td class='tdrow' width='100'>字段03</td>
 <td class='tdrow' width='100'>字段04</td>
 <td class='tdrow' width='100'>字段05</td>
 <td class='tdrow' width='100'>字段06</td>
 <td class='tdrow' width='100'>字段07</td>
 <td class='tdrow' width='100'>字段08</td>
 <td class='tdrow' width='100'>字段09</td>
 <td class='tdrow' width='100'>字段10</td>
 <td class='tdrow' width='100'>字段11</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>AAAA</td>
 <td class='tdcol' width='60'>266</td>
 <td class='tdcol' width='50'>1</td>
 <td width='100'>13</td>
 <td width='100'>206,854</td>
 <td width='100'>204,003</td>
 <td width='100'>136,130,700</td>
 <td width='100'>43</td>
 <td width='100'>93,751</td>
 <td width='100'>22,566</td>
 <td width='100'>14,068</td>
 <td width='100'>7,985,100</td>
 <td width='100'>124,443</td>
 <td width='100'>85,461</td>
 <td width='100'>57,688,400</td>
 <td width='100'>1,564</td>
</tr>
<tr heigth='20'>
 <td class='tdcol' width='100'>BBBB</td>
 <td class='tdcol' width='60'>268</td>
 <td class='tdcol' width='50'>2</td>
 <td width='100'>4</td>
 <td width='100'>164,741</td>
 <td width='100'>169,133</td>
 <td width='100'>95,087,500</td>
 <td width='100'>10</td>
 <td width='100'>28,359</td>
 <td width='100'>11,370</td>
 <td width='100'>6,851</td>
 <td width='100'>3,459,600</td>
 <td width='100'>143,884</td>
 <td width='100'>79,845</td>
 <td width='100'>39,616,400</td>
 <td width='100'>998</td>
</tr>
</table>
</body>
</html>

基于IE与css的表格行头与多层列头锁定方法(转)

从网上看到的,正好项目中用到了,就拿来一用,但是这个有一个问题,就是完成后移动滚动条会出现分隔线混乱的情况,如图所示: 红色是正常的分隔线,绿色是混乱的,要是有解决方式的,希望能留言出出主意哦。 ...

html表格中,锁定行头和列头

  • 2011年12月20日 17:06
  • 9KB
  • 下载

固定表头(行头列头)脚本

  • 2012年07月04日 20:48
  • 32KB
  • 下载

C# gridview 列头画表格

http://www.csframework.com/archive/2/arc-2-20110713-1691.htm 给DevExpress GridView的选择列Header添加CheckB...

Ext实现表格列头冻结效果,锁定列头

这段时间我们的项目中采用了Coolite来做富客户端,Coolite目前的版本是0.8.1,它所采用的Ext版本是2.2.1,因此下面主要是说明在这个版本下所实现的锁定列和多行表头,需要说明的是Ext...
  • e_wsq
  • e_wsq
  • 2013年09月08日 18:26
  • 2474

锁定列头横竖滑动

  • 2014年07月17日 11:23
  • 148KB
  • 下载

ExtJS锁定列头源码

  • 2011年06月07日 22:41
  • 5KB
  • 下载

android开发之横向滚动/竖向滚动的ListView(固定列头)

http://www.jb51.net/article/33376.htm 由于项目需要,我们需要一个可以横向滚动的,又可以竖向滚动的 表格。而且又要考虑大数据量(行)的展示视图。经过几...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章: 锁定行头和列头的表格组件
举报原因:
原因补充:

(最多只允许输入30个字)