锁定行头和列头的表格组件 v2.0

最新推荐文章于 2023-05-29 10:05:08 发布
最新推荐文章于 2023-05-29 10:05:08 发布
阅读量1.4k 收藏
点赞数
分类专栏： DHTML 文章标签： stylesheet border behavior function table class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HStone/article/details/310381
版权

学到新东西了，对组件进行了修改，简化程序，增加功能。

1、在页面中引入风格单定义
<style>
.LockHeadTable {behavior:url(LockHeadTable.htc)}
</style>


2、在需要锁定行列头的表格定义中添加语句“class="LockHeadTable"”就OK了，其他参数有
ROWHEADNUM="锁定行数"
COLHEADNUM="锁定列数"
ROWHEADSTYLE="行表头风格"
COLHEADSTYLE="列表头风格"
ROWSTYLE="行风格1|行风格2|……|行风格n"
FOCUSSTYLE="获得鼠标焦点时的风格"

3、点击行标题时可以对数据进行排序

注意：
　　使用本组件时，行表头中的单元格不允许跨行，8(

例：
<table class="LockHeadTable" ROWHEADNUM=3 COLHEADNUM=1 ROWHEADSTYLE="background:#F7F7F7; color:black;" COLHEADSTYLE="background:#F7F7F7; color:black;" ROWSTYLE="background:#FFFFFF; color:black;|background:#F7F7F7; color:black;"  FOCUSSTYLE="background:green; color:white;" width="1500" border="1" cellpadding="3" cellspacing="0" align="center">

源代码：

LockHeadTable.htc(组件程序)

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

这段脚本可以免费使用于任何非商业用途，引用时请保留本段说明。
//-->
<PUBLIC:COMPONENT>
 
 <PUBLIC:PROPERTY NAME="ROWHEADNUM" />
 <PUBLIC:PROPERTY NAME="COLHEADNUM" />
 <PUBLIC:PROPERTY NAME="ROWHEADSTYLE" />
 <PUBLIC:PROPERTY NAME="COLHEADSTYLE" />
 <PUBLIC:PROPERTY NAME="ROWSTYLE" />
 <PUBLIC:PROPERTY NAME="FOCUSSTYLE" />
 
 <script>
 //初始化
 ROWHEADNUM = (ROWHEADNUM==null?0:parseInt(ROWHEADNUM, 10));
 COLHEADNUM = (COLHEADNUM==null?0:parseInt(COLHEADNUM, 10));
 ROWHEADSTYLE = (ROWHEADSTYLE==null?"":ROWHEADSTYLE);
 COLHEADSTYLE = (COLHEADSTYLE==null?"":COLHEADSTYLE);
 
 arrRowStyle = (ROWSTYLE==null?new Array(""):ROWSTYLE.split("|")); 

 //设置行表头
 var i, j, rowItem, cellItem;
 rowHead = element.cloneNode(true);
 for (i=0; i<ROWHEADNUM; i++) {
  rowItem = element.rows(i);
  rowItem.style.cssText = 'z-index:10; position:relative; top:expression(this.offsetParent.scrollTop);' + ROWHEADSTYLE;
 }
 
 //设置列表头
 for (i=0; i<element.rows.length; i++) {
  rowItem = element.rows(i);
  if (i>=ROWHEADNUM) {
   rowItem.style.cssText = "position:relative;" + arrRowStyle[(i - ROWHEADNUM) % arrRowStyle.length];
   if (FOCUSSTYLE!=null) {
    rowItem.onmouseover = function () { this.style.cssText = "position:relative;" + FOCUSSTYLE;}
    rowItem.onmouseout = function () { this.style.cssText = "position:relative;" + arrRowStyle[(this.rowIndex - ROWHEADNUM) % arrRowStyle.length];}
   }
  }
    
  for (j=0; j<COLHEADNUM; j+=cellItem.colSpan) {
   cellItem = rowItem.cells(j);
   cellItem.style.cssText = 'position:relative; left:expression(this.parentElement.offsetParent.scrollLeft);'
    + (i<ROWHEADNUM?'':COLHEADSTYLE);
  }
 }
 
 //设置行标题排序
 for (i=0; i<ROWHEADNUM; i++) {
  rowItem = element.rows(i);
  for (j=0; j<rowItem.cells.length; j++) {
   cellItem = rowItem.cells(j);
   if (cellItem.rowSpan==ROWHEADNUM-i) {
    cellItem.style.cursor = "hand";
    cellItem.sortAsc = true;
    cellItem.onclick = sortTable;
   }
  }
 }

 //排序
 function sortTable() {
  var objCol = event.srcElement;
  if (objCol.tagName == "TD") {
   var intCol = objCol.cellIndex;
   objCol.sortAsc = !objCol.sortAsc;
   
   sort_type = 'Num';
   if (isNaN(parseInt(element.rows(ROWHEADNUM).cells(intCol).innerText, 10)))
    sort_type = 'Asc';
   
   var i,j,boltmp;
   for (i = ROWHEADNUM; i < element.rows.length; i++)
    for (j = i + 1; j < element.rows.length; j++) {
     switch (sort_type) {
     case 'Num':
      boltmp = (parseInt(element.rows(i).cells(intCol).innerText, 10) >= parseInt(element.rows(j).cells(intCol).innerText, 10));
      break;
     case 'Asc':
     default:
      boltmp = (element.rows(i).cells(intCol).innerText >= element.rows(j).cells(intCol).innerText);
     }
     if ((objCol.sortAsc && !boltmp) || (!objCol.sortAsc && boltmp)) {
      element.moveRow(j, i);
     }
    }
  }
 }
 </script>
</PUBLIC:COMPONENT>

LockHeadTable.html(演示页面)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<link href="css/css.css" rel="stylesheet" type="text/css">
<title>统计表</title>
<style>
.LockHeadTable {behavior:url(htc/LockHeadTable.htc)>
</style>
</head>

<body>
<br>
<table class="LockHeadTable" ROWHEADNUM=3 COLHEADNUM=1 ROWHEADSTYLE="background:#F7F7F7; color:black;" COLHEADSTYLE="background:#F7F7F7; color:black;" ROWSTYLE="background:#FFFFFF; color:black;|background:#F7F7F7; color:black;"  FOCUSSTYLE="background:green; color:white;" width="1500" border="1" cellpadding="3" cellspacing="0" align="center">
<tr>
 <td colspan="17">
  <table border="0" cellpadding="3" cellspacing="0" style="width:expression(screen.width - 300);">
  <tr><td colspan="2" align="center">统计表</td></tr>
  <tr>
   <td>统计日期：XXXX年XX月XX日——XXXX年XX月XX日</td>
   <td align="right">单位：件、元</td>
  </tr>
  </table>
 </td>
</tr>
<tr align="center">
 <td>&nbsp;</td>
 <td colspan="2">连锁店A</td>
 <td colspan="2">连锁店B</td>
 <td colspan="2">连锁店C</td>
 <td colspan="2">连锁店D</td>
 <td colspan="2">连锁店E</td>
 <td colspan="2">连锁店F</td>
 <td colspan="2">连锁店G</td>
 <td colspan="2">连锁店H</td>
</tr>
<tr align="center">
 <td>商品</td>
 <td>数量</td>
 <td>金额</td>
 <td>数量</td>
 <td>金额</td>
 <td>数量</td>
 <td>金额</td>
 <td>数量</td>
 <td>金额</td>
 <td>数量</td>
 <td>金额</td>
 <td>数量</td>
 <td>金额</td>
 <td>数量</td>
 <td>金额</td>
 <td>数量</td>
 <td>金额</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品1</td>
 <td>1</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品2</td>
 <td>2</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品3</td>
 <td>3</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品4</td>
 <td>4</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品5</td>
 <td>5</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品6</td>
 <td>6</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品7</td>
 <td>7</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品8</td>
 <td>8</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品9</td>
 <td>9</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品10</td>
 <td>10</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
<tr align="right">
 <td align="left">XXXX商品11</td>
 <td>11</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
 <td>xxx</td>
 <td>xxx,xxx.xx</td>
</tr>
</table>

</body>
</html>

HStone
关注
专栏目录
表头锁定的list列表
12-08
list 列表样式，用于查询结果返回 ，文档格式是html
html表格中,锁定行头和列头
12-20
在html的表格中,锁定行头和列头,使用样式表,不用加载第三方控件.
JEPLUS列表字段提示以及锁定列——JEPLUS查看原文及阅读更多
weixin_33721427的博客
06-21 144
为什么80%的码农都做不了架构师？>>> ...
锁定首列其他列宽度自适应HTML效果演示
系分之旅
12-06 2351
锁定首列其他列宽度自适应HTML效果演示 .selectedRow{ color:#000000; BACKGROUND-COLOR: #C1C9CE;}function selectTableRow(){ var srcObj = event.srcElement; var cellObj = srcObj; table=srcObj; var tabFlag = false; while(ta
锁定行头和列头的表格组件
Stone的专栏
01-19 1739
当报表比较大时，在Web上查看内容会很不方便，如果可以象Excel那样锁定报表的行头和列头就好了……最近闲着没事，写了个锁定报表行头和列头的组件，用法也挺简单：1、在页面中引入风格单定义.LockHeadTable {behavior:url(LockHeadTable.htc)}2、在需要锁定行列头的表格定义中添加语句“class="LockHeadTable" ROWNUM="锁定行数" CO
html 表格 锁定首行,教你实现首行及首列固定 Table
weixin_34773479的博客
06-07 1461
先秀一下 demo！此款 Table 源码~表面上，在顶部及左侧悬挂两栏并非难事。但单元格尺寸根据其不确定的内容伸展，且顶部及左侧表头也应随之调整宽高。Table 天然具备如此属性，我们可将 thead 剥离进行 fixed，但首列每一项分散在每一行，如何整体剥离？显然剥离较棘手，需转变思路。定义新元素模拟首列并悬挂于左侧，但其单元格如何同步同行单元格高度？利用 js 获取当前行高度并赋值于首列元...
div 画的表格固定表头(表格组件)
m0_56771924的博客
05-29 467
属性，但是在对于一些旧版本的浏览器，表头可能无法正常固定。如果你需要考虑兼容性的问题，可以使用一些已有的 CSS 库，例如 element-ui、ant-design 等，它们都已经针对表格等组件的固定表头做了充分的兼容性处理。属性的兼容性问题，不同的浏览器可能会有不同的支持程度。目前，主流浏览器（如 Chrome、Firefox、Safari 等）都已经支持了。如果你希望 div 画的表格能够固定表头，可以使用 CSS 中的。2. 然后，为表格的内容区域设置一个高度和。属性，用来使内容区域能够滚动。
基于IE与css的表格行头与多层列头锁定方法
Hello World
11-20 1178
（左边图锁定了行头与列头，右边图仅锁定列头） 有许多的锁定或固定html表格表头的方法和技术，本文介绍的是一个基于IE和css的简易实现方法，基本思路为：使用div行级元素确定一个包含表格的区域，在区域滚动移动时定位非固定单元格的位置（top/left）。 1、确定表格区域 定义一个有边框的div元素，并设置其overfloaw属性为scroll，保证该区域恒有一个垂直与水平滚动
固定表和行头与列头
我想我是海 冬天的大海 心情随风轻摆
04-25 1546
new document <!-- function FixTable(TableID, FixColumnNumber, width, height) { /// /// 锁定表头和列 /// sorex.cnblogs.com /// /
html多行多列的表单,如何制作多行多列的表格
weixin_29001419的博客
06-23 1922
满意答案展开全部 在Excel中做界面式表格必须的步骤，设置统一背景色，渐变要比一般的单色更美观，字体格式要和背景色协调，添加图标下面说明文字，使整个表格颜色要保持在同一个色系。一步：表格整体填充浅灰色。在excel中做界面式表格必须的步骤，设置统一背景色。第二步：设置摆放图标的行白色填充色，然后插入文本框设置渐变色、输入文字和设置字体为华文彩文。渐变要比一般的单色更美观，字体格式要和背景色协...
最简单最实用的WEB表格锁定表头和固定数据列的方法示例
10-29
最简单最实用的WEB表格锁定表头和固定数据列的方法示例，提升WEB版的ERP系统用户体验。
jsp页面锁定行头和列头
12-10
锁定行头和列头，绝对经典的处理方法，还可以是动态的。
冻结表格，表头固定，行头国定，列头固定
03-31
标题“冻结表格，表头固定，行头固定，列头固定”所涉及的知识点是关于如何在表格中保持表头、行头和列头在滚动时始终可见。以下是这些功能的详细说明： 1. **冻结表格**：冻结表格是一种功能，它允许用户在滚动...
可以拖动行头和列头的表格
03-28
"可以拖动行头和列头的表格"是一个重要的功能，它为用户提供了一种自定义视图和优化数据浏览体验的方式。这个特性通常应用于数据分析、报告展示以及各种管理界面，让用户能够根据自己的需求调整列宽，从而更方便地...
css 设置冻结表格头,固定/冻结行表头、列表头的做法
weixin_39628256的博客
08-03 1144
本文只讲思路和注意事项。本文的固定行表头、列表头要比某些网站的复杂些，因为他们讲的是一个窗口中只有要滚动的表格，而我们是一个窗口中有很多内容，其他内容区域不动，只有表格滚动，同时表格的表头也固定。固定行表头固定行表头相对来说要简单得多。1、将表格放一个 div 中，为这个表格设置高度(如果想做随窗口而变化的自动高度，就用 position:absolute; bottom:xxxpx;……)。为这...
2024最新版手把手教你入门vue+springboot开发SpringBoot + vue 管理系统
09-22
2024最新版手把手教你入门vue+springboot开发SpringBoot + vue 管理系统2024最新版手把手教你入门vue+springboot开发SpringBoot + vue 管理系统2024最新版手把手教你入门vue+springboot开发SpringBoot + vue 管理系统2024最新版手把手教你入门vue+springboot开发SpringBoot + vue 管理系统2024最新版手把手教你入门vue+springboot开发SpringBoot + vue 管理系统2024最新版手把手教你入门vue+springboot开发SpringBoot + vue 管理系统2024最新版手把手教你入门vue+springboot开发SpringBoot + vue 管理系统2024最新版手把手教你入门vue+springboot开发SpringBoot + vue 管理系统2024最新版手把手教你入门vue+springboot开发SpringBoot + vue 管理系统2024最新版手把手教你入门vue+springboot开发SpringBoot
R语言学习记录_R-learning.zip
最新发布
09-22
R语言学习记录_R-learning
【高创新】基于哈里斯鹰优化算法HHO-CNN-BiLSTM-Attention的用客流量预测算法研究Matlab实现.rar
09-22
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
如何去除dataframe的行头和列头
05-16
要去除DataFrame的行头和列头，可以使用`header=None`参数来读取数据，然后使用`iloc`函数选择要保留的行和列。例如： ``` import pandas as pd # 读取数据，header=None表示不使用第一行作为列名 df = pd.read_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值