如何用js控制html里的table让某列固定，实现类似Excel里列固定的效果

如何用js控制html里的table让某列固定，实现类似Excel里列固定的效果?
哪位牛人有完整的例子呢?

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type='text/css'>
    body{
     width:140px;
     height:200px;
     margin:160px auto;
    }
    </style>
    </head>
    <body>
    <div>
    <div style="overflow:auto;height:209px;width:140px;position:relative;border-bottom:1px solid #333" id="tb">
    <table border="1" id="tbl"><tr><td colspan=2 style="width:114px;">sdfsdfdf</td></tr><tr><td>sdfsdfs1</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdfs2</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdfs3</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdfs4</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdfs5</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdfs6</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdfs7</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdfs8</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdfs9</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdf10</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdf11</td><td><img src='images/close.gif' /></td></tr><tr><td>sdfsdf12</td><td><img src='images/close.gif' /></td></tr></table>
    </div>
    <table border="1" id="aaa" style="position:absolute;top:160px;background:#ffffff;"><tr><td colspan=2 style="width:114px">sdfsdfdf</td></tr></table>
    </div>
    </body>
    </html>
    <script type='text/javascript'>onload = init;
    function init(){
    var imgs = document.getElementById("tb").getElementsByTagName("img");
      for(var i=0;i<imgs.length;i++){
      imgs[i].onclick = changeSp;
      }
    }
    function changeSp(){
      if(this.flg){
      this.flg = false;
      this.src = "images/close.gif";
      }else{
      this.flg = true;
      this.src = "images/open.gif";
      }
      var imgs = document.getElementById("tb").getElementsByTagName("img");
      for(var i=0;i<imgs.length;i++){
      if(!imgs[i].flg){
      document.getElementById("tbl").tBodies[0].insertBefore(this.parentNode.parentNode, imgs[i].parentNode.parentNode);
      break;
      }
      imgs[i].onclick = changeSp;
      }
      updataSld();
    }
    function updataSld(){
      var imgs = document.getElementById("tb").getElementsByTagName("img");
      document.getElementById("aaa").tBodies[0].innerText ? document.getElementById("aaa").tBodies[0].innerText= "" :document.getElementById("aaa").tBodies[0].innerHTML ="";
      var tr0 = document.getElementById("tbl").tBodies[0].rows[0].cloneNode(true);
      tr0.style.background = "#ffffff";
      document.getElementById("aaa").tBodies[0].appendChild(tr0);
      for(var i=0;i<imgs.length;i++){
      if(imgs[i].flg){
      var a = imgs[i].parentNode.parentNode.cloneNode(true);
      a.value = imgs[i];
      document.getElementById("aaa").tBodies[0].appendChild(a);
      a.lastChild.firstChild.onclick=(function(a){
      return function(){
      var j=0;
      a.value.src = "images/close.gif";
      a.value.flg = false;
      document.getElementById("aaa").tBodies[0].removeChild(a);
      var imgs = document.getElementById("tb").getElementsByTagName("img");
      for(var i=0;i<imgs.length;i++){
      if(imgs[i].flg){
      j++;
      }
      }
      document.getElementById("tbl").tBodies[0].insertBefore(a.value.parentNode.parentNode, imgs[j+1].parentNode.parentNode);
      }
      })(a);
      }
      }
    }
    </script>
    写了一个，你看看合适吗
      

  2.   

    楼上的也太搞笑了 人家要的某列冻结 你来两个table模拟第一行冻结
      

  3.   

       <script type="text/javascript" language="JavaScript" src="JQuery.js"></script>    <script type="text/javascript" language="javascript">
       $(document).ready(function(){
            
            $("#tb thead tr th").each(function(i){
               $(this).click(function(){
                 $("#tb tbody tr ").each(function(j){
                     $("#tb tr:eq("+j+") td:eq("+i+")").css("background-color","red");
                  })
               })
            })
        })    </script>  <table id="tb" border="0" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th>
                            第一列
                        </th>
                        <th>
                            第二列
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            aaa
                        </td>
                        <td>
                            bb
                        </td>
                    </tr>
                    <tr>
                        <td>
                            cc
                        </td>
                        <td>
                            dd
                        </td>
                    </tr>
                </tbody>
            </table>是不是这样的效果呀，记得给分呀！
      

  4.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML><HEAD><TITLE>锁定表格栏位范例网页</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=unicode">
    <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: #ccc; PADDING-BOTTOM: 4px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; CURSOR: hand; PADDING-TOP: 4px; BORDER-BOTTOM: #555 1px solid; WHITE-SPACE: nowrap
    }
    .cdata {
    BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 3px; BACKGROUND: #fff; PADDING-BOTTOM: 3px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #ddd 1px solid; WHITE-SPACE: nowrap
    }
    </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")// 栏位资料 ( 二维阵列 )
    var DataFields=new Array()
    DataFields[0] =new Array("萧亚轩"  ,"爱的主打歌-吻"   ,"维京 Virgin"    ,"1" ,"持平"  ,"1" ,"2","1" ,"2.9 %")
    DataFields[1] =new Array("张惠妹"  ,"发烧"            ,"华纳 Warner"    ,"2" ,"持平"  ,"2" ,"2","2" ,"2.1 %")
    DataFields[2] =new Array("陶吉吉"  ,"黑色柳丁"        ,"全员集合 Shock" ,"3" ,"持平"  ,"3" ,"5","1" ,"1.8 %")
    DataFields[3] =new Array("S.H.E"   ,"美丽新世界"      ,"华研 HIM"       ,"4" ,"持平"  ,"4" ,"6","1" ,"1.2 %")
    DataFields[4] =new Array("艾薇儿"  ,"展翅高飞"        ,"博德曼 BMG"     ,"5" ,"新进榜","-" ,"1","5" ,"1.1 %")
    DataFields[5] =new Array("任贤齐"  ,"一个任贤齐"      ,"滚石 Rock"      ,"6" ,"新进榜","-" ,"1","6" ,"1.0 %")
    DataFields[6] =new Array("范逸臣"  ,"范逸臣第一张专辑","丰华 Forward"   ,"7" ,"持平"  ,"7" ,"2","7" ,"0.9 %")
    DataFields[7] =new Array("谢霆锋"  ,"无形的他全精选"  ,"新力 Sony"      ,"8" ,"下跌"  ,"6" ,"4","4" ,"0.9 %")
    DataFields[8] =new Array("周蕙"    ,"寂寞城市"        ,"福茂 Decca"     ,"9" ,"下跌"  ,"5" ,"3","5" ,"0.8 %")
    DataFields[9] =new Array("周杰伦"  ,"八度空间"        ,"博德曼 BMG"     ,"10","下跌"  ,"8" ,"8","1" ,"0.8 %")
    DataFields[10]=new Array("酷玩乐团","玩过头"          ,"科艺百代 EMI"   ,"11","上升"  ,"16","2","11","0.7 %")
    DataFields[11]=new Array("张震岳"  ,"等我有一天"      ,"魔岩 Magicstone","12","新进榜","-" ,"1","12","0.6 %")
    DataFields[12]=new Array("堂本刚"  ,"红与蓝"          ,"艾回 Avex"      ,"13","新进榜","-" ,"1","13","0.6 %")
    DataFields[13]=new Array("ENERGY"  ,"COME ON"         ,"环球 Universal" ,"14","下跌"  ,"10","9","5" ,"0.6 %")
    DataFields[14]=new Array("陈冠希"  ,"TRANSITION"      ,"艾回 Avex"      ,"15","下跌"  ,"9" ,"3","5" ,"0.4 %")
    DataFields[15]=new Array("合辑"    ,"MTV 嘻哈大师"    ,"环球 Universal" ,"16","下跌"  ,"12","3","12","0.4 %")</SCRIPT><SCRIPT language=JavaScript>
    var BoxWidth = 480    // 资料表显示宽度 ( 不含卷轴 )
    var ShowLine = 10    // 资料表显示列数
    var RsHeight = 21    // 资料列高度
    var LockCols = 1    // 要锁定的栏位数 ( 由左至右 )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\"><tr>"
    for(i=0;i<DataTitles.length;i++){
      if(i<LockCols){
        var cTitle=DataTitles[i].split("#")
        iBoxWidth-=cTitle[1]
        var DynTip=((i+1)==LockCols)?"解除锁定":"锁定此栏位"
        NewHTML+="<td><div class=\"title\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px\" title=\""+DynTip+"\" onclick=\"ResetTable("+i+")\">"+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\"><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\" title=\"锁定此栏位\" onclick=\"ResetTable("+i+")\">"+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 border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"
    for(i=0;i<DataFields.length;i++){
      NewHTML+="<tr>"
      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 border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"
    for(i=0;i<DataFields.length;i++){
      NewHTML+="<tr>"
      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(n){
    var iBoxWidth=0
    for(i=0;i<DataTitles.length;i++){
      if(i<(n+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==n+1)?0:n+1
      WriteTable()
    }
    }function SYNC_Roll(){
    DataGroup1.style.posTop=-DataFrame3.scrollTop
    DataGroup2.style.posTop=-DataFrame3.scrollTop
    }
    window.onload=WriteTable
    </SCRIPT><META content="MSHTML 6.00.2900.6003" name=GENERATOR></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></CENTER></BODY></HTML>