js 小题，请高手指点

Question

 用js 控制做一个跟excel 表格差不多的功能，就是 标题栏固定，左边序号列也是固定的；当向下拉的时候 左边序号是对应每一行的也会跟着下滑；而顶部的列头是对应每一列的所以不会动，  当向右查看数据时左边的序号列（只有这列固定不动）  不动；而顶部的列标题头对应每列就会跟着向右滑动..  这样的功能用js 怎么控制啊，请高手请教》。

Answer 1

  就和 excel表格一个， 左边的号码不会动，头部A B C 也不会动，下边托拉时才会动。 而下边是只显示数据而以，不需编辑，这样怎么实现？ 请教...

Answer 2

jquery插件的 easyui中 Datagrid 可以实现

Answer 3

有没有更简单的方法做啊，jquery 插件是可以实现这个功能，但是我需要放到android 平板上来使用的；而在平板上加载jquery的js文件的话会相当的慢， 滑动的时候栏目都对不齐，所以想找个好办法  把js文件搞小点，而且运行真起来不需要加载太多的文件就可以。 求助.

Answer 4

居然一次发不了,那就分几次发
css样式<style type="text/css">
body { 
    font-family: "arial", "helvetica", "sans-serif", ""; 
font-size: 9pt; 
    margin: 0px;
scrollbar-face-color:#efefe7;
    scrollbar-highlight-color:#ffffff;
    scrollbar-3dlight-color:#a5a5a5;
    scrollbar-darkshadow-color:#a5a5a5;
    scrollbar-shadow-color:#d6d6ce;
    scrollbar-arrow-color:#003184;
    scrollbar-track-color:#deded6;
}
table { 
    font-family: "arial", "helvetica", "sans-serif",""; 
font-size: 9pt; 
line-height: 150%; 
color: #000000;
         }
.display-tb2
{
border-right: #808080 1px solid; 
border-top: #808080 1px solid; 
border-left: #808080 1px solid; 
border-bottom: #808080 1px solid;
border:0;
cellpadding:2;
cellspacing:0;
margin-top:2px;
border-collapse:collapse;
}
div.tableContainer
{
overflow-x:auto;
width:760px;
dyn-behavior:expression(
onscroll == null?
(onscroll = function(){
if(event.srcElement.scrollLeft == event.srcElement.oldScroll) return;
var oGridBody = document.getElementById("order_GridBody");
oGridBody.style.width = parseInt(event.srcElement.clientWidth) + event.srcElement.scrollLeft + "px";
event.srcElement.oldScroll == event.srcElement.scrollLeft;
}):true,
onmousedown == null?
(onmousedown = function(){
if(self.currentTH != null) return;
var obj = document.elementFromPoint(event.x,event.y);
var objL = document.elementFromPoint(event.x - 1,event.y); if(obj.tagName.toLowerCase() == "th") 
{

if(objL.tagName.toLowerCase() == "th")
{
obj = objL;
}
if(obj.className == "fixed") return;
self.currentX = event.x;
self.currentTH = obj.childNodes[0];
self.currentTH.setCapture();
}
}):true,
onmouseup == null?
(onmouseup = function(){
if(self.currentTH != null)
{
self.currentTH.releaseCapture();
self.currentTH = null;
}
}):true,
onmousemove == null?
(onmousemove = function(){
if(self.currentTH != null)
{
var width = Math.round(parseInt(self.currentTH.clientWidth) + event.x - self.currentX);
if(width < 0) width = 0;
var dt = parseInt(self.currentTH.style.width) - width;
self.currentTH.style.width = width;
__resizeCell(self.currentTH.columnIndex,self.currentTH.style.width);
self.currentX = event.x;
}
}):true,
self.__resizeCell == null?
(self.__resizeCell = function(idx, width){
var cells = document.getElementById("order_GridBody_Cells");
var rows = cells.childNodes;
var i = 0;
for (var i = 0; i < rows.length; i++)
{
var cell = rows[i].childNodes[idx].childNodes[0];
var resetPattern = /style=[^\s\t\n]+/;
cell.outerHTML = cell.outerHTML.toString().replace(resetPattern, "style='width:" +width + "'");
}
}):true
)
}
div.bodyContainer
{
height:400px;
width:760px;
overflow-x:hidden;
overflow-y:auto;
}
div.gridCell_standard
{
width:100px;
overflow:hidden;
nw:expression(this.noWrap=true);
margin-left: 0px;
margin-right: 1px;
padding-left: 2px;
cursor:default;
}
div.gridCell_narrow
{
width:30px;
overflow:hidden;
margin-left: 0px;
margin-right: 1px;
padding-left: 2px;
nw:expression(this.noWrap=true);
cursor:default;
}
th 
{
border-right: #a4a6a4 1px solid; 
border-top: #a4a6a4 1px solid; 
border-left: #a4a6a4 1px solid; 
border-bottom: #a4a6a4 1px solid;
background-image: url(images/default/headerbg.gif);
                color:#ffffff;
font-style:normal;
font-weight:normal;
height:20px;
cursor:col-resize;
dyn-behavior:expression(
ondblclick == null?
(ondblclick = function()
{
var src = event.srcElement;
if(event.srcElement.tagName.toLowerCase()!="div")
{
src = src.childNodes[0];
}
src.style.width = "";
__resizeCell(src.columnIndex,src.clientWidth);
}):true
)
}
th.fixed
{
border-right: #a4a6a4 1px solid; 
border-top: #a4a6a4 1px solid; 
border-left: #a4a6a4 1px solid; 
border-bottom: #a4a6a4 1px solid;
background-image: url(images/default/headerbg.gif);
                color:#ffffff;
font-style:normal;
font-weight:normal;
height:20px;
cursor:default;
}
tr.odd 
{
  border-right: #a4a6a4 1px solid; 
border-top: #a4a6a4 0px solid; 
border-left: #a4a6a4 0px solid; 
border-bottom: #a4a6a4 1px solid;
noWrap;
}
tr.even 
{
  border-right: #a4a6a4 1px solid; 
border-top: #a4a6a4 0px solid; 
border-left: #a4a6a4 0px solid; 
border-bottom: #a4a6a4 1px solid;
}
td.odd_even
{
  border-right: #a4a6a4 1px solid; 
border-top: #a4a6a4 1px solid; 
border-left: #a4a6a4 1px solid; 
border-bottom: #a4a6a4 1px solid;
noWrap;
}
td.select-cell
{
  border-right: #a4a6a4 1px solid; 
border-top: #a4a6a4 1px solid; 
border-left: #a4a6a4 1px solid; 
border-bottom: #a4a6a4 1px solid;
}
</style>

Answer 5

本人建议还是用js框架，比较好的是ExtJs，也可以用楼上说的JQUERY

Answer 6

body内容<body bgcolor="F6F6F6" style="padding:10 10 10 10"><div class="tableContainer" id="order_Container">
<!--动态表格-->
<table cellpadding="0" class="display-tb2" style="margin-top: 2px;" cellspacing="0" border="0" id="order">
<tr>
<td>
<table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0">
<thead>
<th class="fixed"><div columnIndex="0" class="gridCell_narrow">选择</div></th>
<th><div columnIndex="1" class="gridCell_standard">订单编号</div></th>
<th><div columnIndex="2" class="gridCell_standard">订货日期</div></th>
<th><div columnIndex="3" class="gridCell_standard">订货单位</div></th>
<th><div columnIndex="4" class="gridCell_standard">订单类别</div></th>
<th><div columnIndex="5" class="gridCell_standard">产品类别</div></th>
<th><div columnIndex="6" class="gridCell_standard">版本号</div></th>
<th><div columnIndex="7" class="gridCell_standard">订货金额</div></th>
<th><div columnIndex="8" class="gridCell_standard">订单状态</div></th>
</thead>
</table>
</td>
</tr>
<!--<tfoot> 共3页 </tfoot>-->
<tbody>
<tr class="odd">
<td colspan="9">
<div id="order_GridBody" class="bodyContainer">
    <table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0">
<tbody id="order_GridBody_Cells">
<tr class="even">
<td width="30px" class="select-cell">
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="9" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">32.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
         <div class="gridCell_narrow"><input type="checkbox" name="id" value="10" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard"> </div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="17" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="18" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="19" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="odd">
<td width="30px" class="select-cell">
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="20" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
<tr class="even">
<td width="30px" class="select-cell">
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="21" /></div> </td>
<td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
<td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
<td class="odd_even"><div class="gridCell_standard">-1</div></td>
<td class="odd_even"><div class="gridCell_standard">分销</div></td>
<td class="odd_even"><div class="gridCell_standard">KIS</div></td>
<td class="odd_even"><div class="gridCell_standard">10.2</div></td>
<td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
<td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<div style="height:15px"></div>
</div>
</body>

Answer 7

大牛们，  jQuery框架是可以实现这功能，但是在平板电脑上运行jquery 加载的文件就相当的慢，所以在平板上使用Jquery 来实现这样的功能是不可能的了，只能小一点的js 来控制，  请大牛们给小弟想想办法...

Answer 8

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>固定表头和列</title>
    <style>
/*重点：固定行头样式*/   
.scrollRowThead{
position: relative; 
left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft);
z-index:0;
}   
/*重点：固定表头样式*/   
.scrollColThead {
position: relative;
top: expression(this.parentElement.parentElement.parentElement.scrollTop);
z-index:2;
}   
/*行列交叉的地方*/   
.scrollCR { 
z-index:3;
}   
/*div外框*/   
.scrollDiv {
width: 100%;
height: 100%;
clear: both; 
border: 0px solid #EEEEEE;
overflow: auto; 
}   
/*行头居中*/   
.scrollColThead td,.scrollColThead th{ 
text-align: center ;
}   
/*行头列头背景*/   
.scrollRowThead,.scrollColThead td,.scrollColThead th{
background-color: #D9E7F9;
}
    </style>
</head>
<body style="overflow: hidden">
<div style="overflow: scroll;height:200px;width:300px;">
<table border="0" cellpadding="3" cellspacing="0" width="500" >
<tr class="scrollColThead">
    <td class="scrollRowThead">  
        <input type="checkbox" name="checkbox" value="checkbox" /> a</td>  
      <td>单元格2</td>  
      <td>单元格3</td>  
      <td>单元格4</td>  
      <td>单元格5</td>  
      <td>单元格5</td>  
    </tr>  
    <tr>  
      <td class="scrollRowThead">  
        <input type="checkbox" name="checkbox2" value="checkbox" />  
        b</td>  
      <td>单元格2</td>  
      <td>单元格3</td>  
      <td>单元格4</td>  
      <td>单元格5</td>  
      <td>单元格5</td>  
    </tr>  
    <tr>  
      <td class="scrollRowThead" >  
        <input type="checkbox" name="checkbox3" value="checkbox" /> 
        c</td>  
      <td >单元格2</td>  
      <td >单元格3</td>  
      <td >单元格4</td>  
      <td >单元格5</td>  
      <td >单元格5</td>  
    </tr>  
    <tr>  
      <td class="scrollRowThead">  
        <input type="checkbox" name="checkbox4" value="checkbox" />  
        d</td>  
      <td>单元格2</td>  
      <td>单元格3</td>  
      <td>单元格4</td>  
      <td>单元格5</td>  
      <td>单元格5</td>  
    </tr>  
    <tr>  
      <td class="scrollRowThead">  
        <input type="checkbox" name="checkbox5" value="checkbox" /> 
        e</td>  
      <td>单元格2</td>  
      <td>单元格3</td>  
      <td>单元格4</td>  
      <td>单元格5</td>  
      <td>单元格5</td>  
    </tr>  
    <tr>  
      <td class="scrollRowThead">  
        <input type="checkbox" name="checkbox6" value="checkbox" /> 
        f</td>  
      <td>单元格2</td>  
      <td>单元格3</td>  
      <td>单元格4</td>  
      <td>单元格5</td>  
      <td>单元格5</td>  
    </tr>  
    <tr>  
      <td class="scrollRowThead">  
        <input type="checkbox" name="checkbox7" value="checkbox" /> 
        g</td>  
      <td>单元格2</td>  
      <td>单元格3</td>  
      <td>单元格4</td>  
      <td>单元格5</td>  
      <td>单元格5</td>  
    </tr>  
    <tr>  
      <td class="scrollRowThead">  
        <input type="checkbox" name="checkbox7" value="checkbox" /> 
        g</td>  
      <td>单元格2</td>  
      <td>单元格3</td>  
      <td>单元格4</td>  
      <td>单元格5</td>  
      <td>单元格5</td>  
    </tr>  
    <tr>  
      <td class="scrollRowThead">  
        <input type="checkbox" name="checkbox7" value="checkbox" /> 
        g</td>  
      <td>单元格2</td>  
      <td>单元格3</td>  
      <td>单元格4</td>  
      <td>单元格5</td>  
      <td>单元格5</td>  
    </tr>  
    <tr>  
      <td class="scrollRowThead">  
        <input type="checkbox" name="checkbox7" value="checkbox" /> 
        g</td>  
      <td>单元格2</td>  
      <td>单元格3</td>  
      <td>单元格4</td>  
      <td>单元格5</td>  
      <td>单元格5</td>  
    </tr>  
    <tr>  
      <td class="scrollRowThead">  
        <input type="checkbox" name="checkbox7" value="checkbox" /> 
        g</td>  
      <td>单元格2</td>  
      <td>单元格3</td>  
      <td>单元格4</td>  
      <td>单元格5</td>  
      <td>单元格5</td>  
    </tr>  
    <tr>  
      <td class="scrollRowThead">  
        <input type="checkbox" name="checkbox7" value="checkbox" /> 
        g</td>  
      <td>单元格2</td>  
      <td>单元格3</td>  
      <td>单元格4</td>  
      <td>单元格5</td>  
      <td>单元格5</td>  
    </tr>  
</table>
    </div>
</body>
</html>

Answer 9

CSS就行了   不用JS的。。