GeneralGrid.htc

<public:attach event=oncontentready onevent="init()">
<script language=javascript>
 border="1";
 cellSpacing="0";
 cellPadding="3";
 width="100%";
 borderColor="GainsBoro";
 style.backgroundColor="CaptionText";
 style.borderCollapse="collapse";
//每页行数
var iPageSize=10;
//当前页号
var iCurPage=1;
//起始行
var iBeginRow=1;
//总页数
var iMaxPage=0;
var vInfoInput=null;
function init()
{
 var vTr=element.insertRow(element.rows.length);
 var vTd=vTr.insertCell(0);
 vTd.colSpan=element.rows(0).cells.length;
 vTd.align="right";

 vInfoInput=document.createElement("input");
 vInfoInput.type="button";
 vInfoInput.disabled="true";
 vInfoInput.value="第"+iCurPage+"页"+"共"+parseInt((element.rows.length-3)/iPageSize+1)+"页";
 vInfoInput.style.height="18px";
 vTd.appendChild(vInfoInput);
 vInput=document.createElement("input");
 vInput.type="button";
 vInput.style.font="normal 9pt Marlett";
 vInput.value="33";
 vInput.attachEvent("onmousedown",onPageFirst);
 vTd.appendChild(vInput);
 vInput=document.createElement("input");
 vInput.type="button";
 vInput.style.font="normal 9pt Marlett";
 vInput.value="3";
 vInput.attachEvent("onmousedown",onPagePrevious);
 vTd.appendChild(vInput);
 vInput=document.createElement("input");
 vInput.type="button";
 vInput.style.font="normal 9pt Marlett";
 vInput.value="4";
 vInput.attachEvent("onmousedown",onPageNext);
 vTd.appendChild(vInput);
 vInput=document.createElement("input");
 vInput.type="button";
 vInput.style.font="normal 9pt Marlett";
 vInput.value="44";
 vInput.attachEvent("onmousedown",onPageLast);
 vTd.appendChild(vInput);

 iBeginRow=getDefaultBeginRow();
 iMaxPage=parseInt((element.rows.length-3)/iPageSize+1);
 //设置单元格样式
 for(iRow=iBeginRow;iRow<element.rows.length-1;iRow++)
 {
  if(iRow>(iBeginRow+iPageSize*iCurPage-1)||iRow<(iBeginRow+iPageSize*(iCurPage-1)))
  {
   element.rows(iRow).style.display="none";
  }
 }
}
//首页
function onPageFirst()
{
 iCurPage=1;
 for(iRow=iBeginRow;iRow<element.rows.length-1;iRow++)
 {
  if(iRow>(iBeginRow+iPageSize*iCurPage-1)||iRow<(iBeginRow+iPageSize*(iCurPage-1)))
  {
   element.rows(iRow).style.display="none";
  }
  else
  {
   element.rows(iRow).style.display="";
  }
 }
 vInfoInput.value="第"+iCurPage+"页"+"共"+iMaxPage+"页";
}
//下一页
function onPageNext()
{
 if(iCurPage!=iMaxPage)
 {
  iCurPage++;
 }
 for(iRow=iBeginRow;iRow<element.rows.length-1;iRow++)
 {
  if(iRow>(iBeginRow+iPageSize*iCurPage-1)||iRow<(iBeginRow+iPageSize*(iCurPage-1)))
  {
   element.rows(iRow).style.display="none";
  }
  else
  {
   element.rows(iRow).style.display="";
  }
 }
 vInfoInput.value="第"+iCurPage+"页"+"共"+iMaxPage+"页";
}
//上一页
function onPagePrevious()
{
 if(iCurPage!=1)
 {
  iCurPage--;
 }
 for(iRow=iBeginRow;iRow<element.rows.length-1;iRow++)
 {
  if(iRow>(iBeginRow+iPageSize*iCurPage-1)||iRow<(iBeginRow+iPageSize*(iCurPage-1)))
  {
   element.rows(iRow).style.display="none";
  }
  else
  {
   element.rows(iRow).style.display="";
  }
 }
 vInfoInput.value="第"+iCurPage+"页"+"共"+iMaxPage+"页";
}
//尾页
function onPageLast()
{
 iCurPage=iMaxPage;
 for(iRow=iBeginRow;iRow<element.rows.length-1;iRow++)
 {
  if(iRow>(iBeginRow+iPageSize*iCurPage-1)||iRow<(iBeginRow+iPageSize*(iCurPage-1)))
  {
   element.rows(iRow).style.display="none";
  }
  else
  {
   element.rows(iRow).style.display="";
  }
 }
 vInfoInput.value="第"+iCurPage+"页"+"共"+iMaxPage+"页";
}
//得到默认起始行
function getDefaultBeginRow()
{
 for(kIndex=0;kIndex<element.rows.length;kIndex++)
 {
  if(element.rows(kIndex).cells(0).tagName=="TD")
  {
   return kIndex;
  }
 }
}
</script>

应用示例

Grid.htm

<style>
/*定义通用数据表格样式Begin*/
.GeneralGrid
{
 behavior:url(´GeneralGrid.htc´);
}
.GeneralGrid TH
{
 font:bold 9pt 宋体;
 text-align:center;
 background-color:WhiteSmoke;
}
.GeneralGrid TD
{
 font:normal 9pt 宋体;
 background-color:CaptionText;
}
/*定义通用数据表格样式End*/
</style>
<table class="GeneralGrid">
  <tr><th>字段1</th><th>字段2</th><th>字段3</th><th>字段4</th></tr>
  <tr><td>值1_1</td><td>值1_2</td><td>值1_3</td><td>值1_4</td></tr>
  <tr><td>值2_1</td><td>值2_2</td><td>值2_3</td><td>值2_4</td></tr>
  <tr><td>值3_1</td><td>值3_2</td><td>值3_3</td><td>值3_4</td></tr>
  <tr><td>值4_1</td><td>值4_2</td><td>值4_3</td><td>值4_4</td></tr>
  <tr><td>值5_1</td><td>值5_2</td><td>值5_3</td><td>值5_4</td></tr>
  <tr><td>值6_1</td><td>值6_2</td><td>值6_3</td><td>值6_4</td></tr>
  <tr><td>值7_1</td><td>值7_2</td><td>值7_3</td><td>值7_4</td></tr>
  <tr><td>值8_1</td><td>值8_2</td><td>值8_3</td><td>值8_4</td></tr>
  <tr><td>值9_1</td><td>值9_2</td><td>值9_3</td><td>值9_4</td></tr>
  <tr><td>值10_1</td><td>值10_2</td><td>值10_3</td><td>值10_4</td></tr>
  <tr><td>值11_1</td><td>值11_2</td><td>值11_3</td><td>值11_4</td></tr>
  <tr><td>值12_1</td><td>值12_2</td><td>值12_3</td><td>值12_4</td></tr>
  <tr><td>值13_1</td><td>值13_2</td><td>值13_3</td><td>值13_4</td></tr>
  <tr><td>值14_1</td><td>值14_2</td><td>值14_3</td><td>值14_4</td></tr>
</table>

看效果吧!