js锁定Table多表头

最新推荐文章于 2022-08-25 15:26:18 发布
最新推荐文章于 2022-08-25 15:26:18 发布
阅读量1.7k 收藏
点赞数
分类专栏： js
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格头行固定：使用js和table实现</title>
<style type=text/css>
.griddiv{
    overflow-x:hidden;
    border:black 1px solid; 
    BACKGROUND: #F8F9FC;
    position:relative;
}
.title /* 新建表头样式 */{
    BORDER-RIGHT: #555 1px solid;
    BORDER-TOP: #fff 1px solid;
    BORDER-BOTTOM: #555 1px solid;
    BORDER-LEFT: #fff 1px solid;
    padding:2 1 2 2;
    BACKGROUND: #ccc;
    CURSOR: hand;
    Font-Size:9pt;
    overflow:hidden;
    WHITE-SPACE: nowrap;
    position:relative;
    display:inline-block;
}
td{
    WHITE-SPACE: nowrap;
    BORDER: #ddd 1px solid;
}
.cdata {
  padding:1 1 1 2;
  Font-Size:9pt;
}
</style>
</head>
<body>
<div class='griddiv' id='griddiv'>
 <div id="titlediv" style='position:relative;BACKGROUND: white'></div>
 <div id="tablediv" style='overflow-y:scroll' οnscrοll='SYNC_Roll(this)'>
  <table id="tb" width='100%' border="0" cellpadding="0" cellspacing="0">
  <col width=88 style='mso-width-source:userset;mso-width-alt:2816;width:66pt'>
 <col width=62 style='mso-width-source:userset;mso-width-alt:1984;width:47pt'>
 <col width=115 style='mso-width-source:userset;mso-width-alt:3680;width:86pt'>
 <col width=94 style='mso-width-source:userset;mso-width-alt:3008;width:71pt'>
 <col width=81 style='mso-width-source:userset;mso-width-alt:2592;width:61pt'>
 <col width=55 style='mso-width-source:userset;mso-width-alt:1760;width:41pt'>
 <tr height=18 style='mso-height-source:userset;height:13.5pt'>
  <td colspan=2 height=18 class=xl24 width=150 style='height:13.5pt;width:113pt'
  bordercolor="#252525">江苏</td>
  <td rowspan=2 class=xl24 width=115 style='width:86pt' bordercolor="#252525">上海</td>
  <td colspan=2 class=xl24 width=175 style='border-left:none;width:132pt'
  bordercolor="#252525">浙江</td>
  <td rowspan=2 class=xl24 width=55 style='width:41pt' bordercolor="#252525">北京</td>
 </tr>
 <tr height=18 style='mso-height-source:userset;height:13.5pt'>
  <td height=18 class=xl24 width=88 style='height:13.5pt;border-top:none;
  width:66pt' bordercolor="#252525">苏州</td>
  <td class=xl24 width=62 style='border-top:none;border-left:none;width:47pt'
  bordercolor="#252525">南京</td>
  <td class=xl24 width=94 style='border-top:none;border-left:none;width:71pt'
  bordercolor="#252525">杭州</td>
  <td class=xl24 width=81 style='border-top:none;border-left:none;width:61pt'
  bordercolor="#252525">嘉兴</td>
 </tr>
  <tr class='cdata'><td>内容内容1内容内容1内容内容1内容内容内容1</td><td>内容222</td><td>内容3内容3内容</td><td>内容4内容4内容</td><td>内容5内容5内容</td><td>内容6内容6内容内容6内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
   <tr class='cdata'><td>内容1</td><td>内容2</td><td>内容3</td><td>内容4</td><td>内容5</td><td>内容6</td></tr>
  </table>
 </div>
</div>
<script language=javascript>

    //开始让火狐支持outerHTML
    if(typeof HTMLElement !== "undefined" && !("outerHTML" in HTMLElement.prototype)) {
    console.log("defined outerHTML");
    HTMLElement.prototype.__defineSetter__("outerHTML",function(str){
    var fragment = document.createDocumentFragment();
    var div = document.createElement("div");
    div.innerHTML = str;
    for(var i=0, n = div.childNodes.length; i<n; i++){
    fragment.appendChild(div.childNodes[i]);
    }
    this.parentNode.replaceChild(fragment, this);
    });
    //
    HTMLElement.prototype.__defineGetter__("outerHTML",function(){
    var tag = this.tagName;
    var attributes = this.attributes;
    var attr = [];
    //for(var name in attributes){//遍历原型链上成员
    for(var i=0,n = attributes.length; i<n; i++){//n指定的属性个数
    if(attributes[i].specified){
    attr.push(attributes[i].name + '="' + attributes[i].value + '"');
    }
    }
    return ((!!this.innerHTML) ?
    '<' + tag + ' ' + attr.join(' ')+'>'+this.innerHTML+'</'+tag+'>' :
    '<' + tag + ' ' +attr.join(' ')+'/>');
    });
    } 
    //结束让火狐支持outerHTML

    var gdiv=document.getElementById("griddiv");      //最外层的div
    var titdiv=document.getElementById("titlediv");   //新建表头的div
    var tbdiv=document.getElementById("tablediv");    //包裹table的div
    //var tb=document.getElementById("tb");             //table
    var tb=document.getElementsByTagName("table")[0];  //取第一个table
    var trs=document.getElementsByTagName("tr");  //取出所有的tr

  //计算表头有多少个tr，通过取rowspan最大值的到table表头有多少个tr
  function getRealityTr(){
  var fristTr=document.getElementsByTagName("tr")[0];
   //临时变量，取值大值
   var max=0; 
   //循环第一个tr里面的所有td
      if(fristTr){
        var len=fristTr.cells.length;
        //如果tr里面只有一个td,说明跨列，表头不至一个tr
        if(len!=1){
          for(j=0;j<len;j++){
             var rowSpanValue=fristTr.cells[j].rowSpan;
              if(''!=rowSpanValue&&rowSpanValue>0){
             // 取出最多的rowSpan
                if(rowSpanValue>max){
                  max=rowSpanValue; 
                }
              }
          }   
        }
        else{
         var rowSpanValue=fristTr.cells[0].rowSpan;
          max=rowSpanValue+1;
       }
        
    }
    return max;
  }

   //得到所有Table表头的tr
   function getTableTr(){
   //用数组存储所有Table的tr
    var trArr=new Array();
    var max=getRealityTr();
    for(var i=0;i<max;i++){
        trArr.push(trs[i]);
     }
     return trArr;
   }

    //创建新的表头，同时删除原来table中的表头
  function createtitle(tdiv,ttb,ttr){ 
    tdiv.style.width=ttb.clientWidth+"px";
    var reg;
    if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)){ //ie
         reg=new RegExp("WIDTH:\\s(\\d)+\\pt","gi");
        }else{//其它浏览器
         reg=new RegExp("WIDTH:(\\d)+\\pt","gi");
    }
    
    var newtit="<table id='tb' width='100%' border='0' cellpadding='0' cellspacing='0'>";
    //由于之前版本手动添加td会把样式、宽度等值改变
    if(ttr)
    {
      for(var j=0;j<ttr.length;j++){
        var trHtml=ttr[j].outerHTML;
        var arrHtml;
        //用td截串
        if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)){ //ie
          arrHtml=trHtml.split("<TD");
        }else{//其它浏览器
          arrHtml=trHtml.split("<td");
        }
        
        //for(var k=0;k<arrHtml.length;k++){
        //  test=test+arrHtml[k];
        //}
        for(var i=0;i<ttr[j].cells.length;i++){
            //截串后没有td要重新添加，第一个是tr不要添加td
             if(i==0){
               newtit+=arrHtml[i];
             }
             if(i>0){
             //截串后的长度比tr里面所有td的长度大1，所有要减1，保证宽度一致
                var inTd=ttr[j].cells[i-1];
               newtit=newtit+"<TD";
                newtit+=arrHtml[i].replace(reg,"width:"+(inTd.clientWidth)+"px");
             }  
         }
         //最后一个td手动拼接，由于接触的长度与tr里面所有td长度不一致
            var outTd=ttr[j].cells[ttr[j].cells.length-1];
            //var te=arrHtml[arrHtml.length-1];
            newtit+="<TD"+arrHtml[arrHtml.length-1].replace(reg,"width:"+(outTd.clientWidth)+"px");
         }
         
      }

    tdiv.innerHTML=newtit+"</table>";
    
    //删除原表头 
     if(ttr){
       for(var i=0;i<ttr.length;i++){
          if (ttr[i].rowIndex!=ttb.rows.length-1)
          ttb.deleteRow(ttr[i].rowIndex);  
       }
    }

    //if (ttr1.rowIndex!=ttb.rows.length-1)
     // ttb.deleteRow(ttr1.rowIndex); 
  }
  
  //function repateString(obj,size,len){

   // var reg=new RegExp("/width:(\\d+)px/","g"); 
    //  var test=obj.replace(reg,"width:"+ttd.clientWidth+"px");
    //var arrHtml=obj.split("<TD");
    
    //  return test;
//  }

  //使新建表头div，随水平滚动条滚动
  function SYNC_Roll(obj){
     titdiv.style.left=-obj.scrollLeft+"px";
  }  
  
  function SetGrid(awidth,aheight){  
     gdiv.style.width=awidth + "px";
     tbdiv.style.width=awidth + "px";
     tbdiv.style.height=aheight + "px";
     var trArr=getTableTr();
     createtitle(titdiv,tb,trArr); 
  }  
  SetGrid(500,300);
</script>
</body>
</html>
zhaishanhui
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Table冻结表头示例代码
09-05
一个基本的表格由`<table>`标签定义，包含`<thead>`（表头）、`<tbody>`（表格主体）和`<tfoot>`（表脚）等部分。在这个示例中，我们只关注`<thead>`和`<tbody>`。例如： ```html <table> 序号 内容 ... ...
jsp笔记及分页基础
康盼的博客
06-25 327
JSP：java服务器页面（Java Server Page）：JSP的本质就是Servlet     特点： 可以在JSP页面中写java代码和HTML代码，与Servlet一样可以提供一个生成动态页面的技术 在JSP中写页面jsp代码就像是写HTML代码，jsp在HTML中嵌套了Java代码         JSP与Servlet的相比：    ・Servlet可以写HTML
表头固定内容可滚动表格的3种实现方法
weixin_30565327的博客
12-14 1702
有时候，我们在开发前端页面过程中，可能会用到这种表格：表头固定不动，表格内容（<tbody>）需要竖直滚动。 像这样的： 还有这样的： 通过研究，我大致总结了以下三种实现办法供大家参考，如果有错误之处敬请指正，也欢迎拍砖！！ 一、表格总宽度自动，每列宽度设置统一用<colgroup>设置 这种实现方法最简单，只需要用两个表格，一个表格作为表头，另一个表格用<...
js table 多级表头
xiaochouniu1的博客
07-26 1048
代码 <table> <tr> <th rowspan='2'>1</th> <th rowspan='2'>2</th> <th rowspan='2'>3</th> <th rowspan='2'>4</th> <th rowspan='2'&g
JS写的GRID控件 ,多表头, 合并行单元格, 冻结列. 还算比较实用. (原创)
ABC2801的博客
12-14 608
开发中一直用到各种样式的GRID. 每次都要花一些时间弄. 抽空写了个 控件. 代码水平有限,还请高手指点.目前来看 是支持IE6+,FF .其他的 就没试. 先上张效果图吧. 固定的表头和冻结列其实是用4个表格实现的. 具体的实现代码我这里就不讲了. 有源码.主要讲下怎么使用.数据源是JSON格式 控件属性定义:...
JS打印表格（HTML定义格式）
weixin_34360651的博客
09-22 298
 &lt;script type="text/javascript"&gt;        function printEmpty() {            var w = window.open("工作日志.htm");//            w.focus();            w.print();        }         //data:工作日志id        f...
js实现html table 行,列锁定的简单实例
10-21
3. 接下来，函数创建了四个新的div元素，分别用于存放锁定的表头（`_tableHead`）、锁定的列（`_tableColumn`）、浮动的数据部分（`_tableData`）以及一个用于克隆表头和锁定列的临时div（`_tableFix`）。...
Ext3.4.0复杂(多行)表头+锁定多列例子
09-09
Ext3.4.0复杂(多行)表头+锁定多列例子 非常棒，项目中需要使用到的。
jQuery fixed-table.js锁定表头Table插件特效代码.zip
11-16
jQuery fixed-table.js锁定表头Table插件特效代码.zip
JS固定表头和左边列V2.0（源码）
07-31
锁定表头及固定左边列，原生JS原创代码 需要注意的问题： 1.表格的宽度以及表格每一列的宽度需要固定（特殊情况除外：当表格列数少并且表格总宽度明显小于表格父容器的宽度时，也就是表格列不存在自动换行的问题） 2...
extjs3多表头
02-27
extjs3多表头;表头合并;绝对可以用
JS冻结表格,锁定表头,固定行列（上下左右4个方向）
11-12
JS冻结窗格（表头锁定）插件，自适应表格单元格宽度，兼容主流浏览器（注：不兼容IE9以下版本的IE浏览器），代码调用方式 $.frozen(tableElement或tableId,{参数...},force:是否强制冻结，因为有防止重复冻结功能)，调用方法比较简单，具体调用方法请参考示例。
csharp:正则表达式采集网页数据
weixin_39037804的博客
10-11 502
https://msdn.microsoft.com/zh-cn/library/system.text.regularexpressions.regex(v=vs.110).aspx https:/...
网页点名(下拉菜单版本)
桑海田
10-15 1157
效果图：First，把名单另存为.htmlSecond，把生成的table复制到html里面（位置随便），在给每个table一个idThird，看代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <
HTML复杂表格绘制实现思路
CodingNoob
03-07 4415
最近在做项目的时候遇到一个需求，要做一个表格，这个表格是Excel里面业务人员绘制好的，表格结构比较复杂，如果要自己一个一个地用table去编写需要花很长的时间，于是想了下要怎么去实现复杂表格的方案，话不多说。 比如如果要实现下面的表格（这个还算好的了，如果更复杂那应该怎么办）： 于是，我想了下，能不能找到一些工具插件之类的去实现，找了一两个小时之后发现还是没有，然后以前刚毕业的那段时间在...
Excel的设置 .net
ruirui
05-29 2396
using Microsoft.Office.Interop.Owc11; public void painItem(){  SpreadsheetClass Sheet = new SpreadsheetClass();             Sheet.get_Range(Sheet.Cells[1, 1], Sheet.Cells[2, column.Count + 1]
element plus 表el-table的多级表头/动态表头处理
qq_27936291的博客
08-25 7317
element plus 表el-table的多级表头/动态表头处理，这个涉及数据结构处理，整理成符合element plus渲染的数据结构
Js动态生成多层表头的表格
团长的博客
04-13 5188
Js动态生成「纵向」多层表头的表格前言需求代码htmlJs 前言 菜鸟来记录下自己工作中或者学习中遇到的问题和一些想法，各位看官也可以来指点一下，分享观点。 这是第一次写个人博客，之前也知道写技术博客对个人技术的提升很有效，但是一直没啥动力开动第一篇，昨天单位新开工个项目，技术架构不算前沿，Js里有一些是预封装的方法，不过很多地方会涉及到业务需求不一致，所以要自己手写Js。今天有一个纵向多层表头的...
layui.table多表头配置
最新发布
06-11
在 layui 中，可以通过 `cols` 参数来设置表格的列配置，包括表头和数据列的配置。在 `cols` 中，可以通过嵌套对象来实现多级表头的配置。 下面是一个示例代码： ```javascript layui.use(['table'], function(){ var table = layui.table; table.render({ elem: '#test', cols: [ [ {field: 'id', rowspan: 2, title: 'ID'}, {field: 'username', rowspan: 2, title: '用户名'}, {field: 'sex', rowspan: 2, title: '性别'}, {title: '联系方式', colspan: 2}, {title: '其它信息', colspan: 3} ], [ {field: 'email', title: '邮箱'}, {field: 'phone', title: '手机'}, {field: 'address', title: '地址'}, {field: 'ip', title: 'IP'}, {field: 'remark', title: '备注'} ] ], data: [ {id: 1, username: '张三', sex: '男', email: 'zhangsan@qq.com', phone: '13812345678', address: '北京市', ip: '192.168.1.1', remark: '无'}, {id: 2, username: '李四', sex: '女', email: 'lisi@qq.com', phone: '13987654321', address: '上海市', ip: '192.168.1.2', remark: '无'} ] }); }); ``` 在上面的代码中，通过 `cols` 参数设置了一个多级表头，包括两行表头和五列数据列。其中，第一行表头包括了三个单元格和两个多列单元格，第二行表头包括了五个单元格。 在单元格的配置中，可以通过 `rowspan` 和 `colspan` 属性来设置单元格所占的行数和列数。如果一个单元格同时设置了 `rowspan` 和 `colspan`，则它将会占据多行多列。 除了多级表头之外，还可以通过 `fixed` 属性来设置固定列和固定表头。具体的用法可以参考 layui 的官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值