Table冻结表头示例代码

Table冻结表头：


代码如下:

<script type="text/javascript">
function fixupFirstRow(tab) {
var div=tab.parentNode;
if(div.className.toLowerCase()=="freezediv"){
tab.rows[0].style.zIndex="1";
tab.rows[0].style.position="relative";
div.onscroll = function(){
var tr = tab.rows[0];
tr.style.top = this.scrollTop-(this.scrollTop==0?1:2);
tr.style.left=-1;
}
}
}

window.onload = function(){
var tab=document.getElementById("freezedivTable");
if(tab){
fixupFirstRow(tab);
}
}
</script>

html源码：


代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function fixupFirstRow(tab) {
var div=tab.parentNode;
if(div.className.toLowerCase()=="freezediv"){
tab.rows[0].style.zIndex="1";
tab.rows[0].style.position="relative";
div.onscroll = function(){
var tr = tab.rows[0];
tr.style.top = this.scrollTop-(this.scrollTop==0?1:2);
tr.style.left=-1;
}
}
}

window.onload = function(){
var tab=document.getElementById("freezedivTable");
if(tab){
fixupFirstRow(tab);
}
}
</script>
</head>
<body>
<div class="freezediv" style="width:100%;height:100px;overflow:auto;">
<table id="freezedivTable" style="width:100%;" border="1">
<tr bgcolor="white">
<th width="25%">序号</th>
<th width="25%">内容</th>
<th width="25%">序号</th>
<th width="25%">内容</th>
</tr>
<tr>
<td>1</td>
<td>内容</td>
<td>11</td>
<td>内容</td>
</tr>
<tr>
<td>2</td>
<td>内容</td>
<td>22</td>
<td>内容</td>
</tr>
<tr>
<td>3</td>
<td>内容</td>
<td>33</td>
<td>内容</td>
</tr>
<tr>
<td>4</td>
<td>内容</td>
<td>44</td>
<td>内容</td>
</tr>
<tr>
<td>5</td>
<td>内容</td>
<td>55</td>
<td>内容</td>
</tr>
<tr>
<td>6</td>
<td>内容</td>
<td>66</td>
<td>内容</td>
</tr>
<tr>
<td>7</td>
<td>内容</td>
<td>77</td>
<td>内容</td>
</tr>
<tr>
<td>8</td>
<td>内容</td>
<td>88</td>
<td>内容</td>
</tr>
<tr>
<td>9</td>
<td>内容</td>
<td>99</td>
<td>内容</td>
</tr>
<tr>
<td>10</td>
<td>内容</td>
<td>1010</td>
<td>内容</td>
</tr>
</table>
</div>
</body>
</html>

赞 (0)

相关推荐

  • Table冻结表头示例代码

    Table冻结表头: 复制代码 代码如下: <script type="text/javascript"> function fixupFirstRow(tab) { var div=tab.parentNode; if(div.className.toLowerCase()=="freezediv"){ tab.rows[0].style.zIndex="1"; tab.rows[0].style.position="re

  • 利用js动态添加删除table行的示例代码

    如下所示: 复制代码 代码如下: //动态添加行function addRow(){   var table = document.getElementById("tableID");   var newRow = table.insertRow(); //创建新行   var newCell1 = newRow.insertCell(); //创建新单元格   newCell.innerHTML = "": //单元格内的内容   newCell.setAttri

  • VUE element-ui 写个复用Table组件的示例代码

    饿了么的table组件功能很强大,对于项目中的各种表格基本够用,但是--个人对于它以列为单位的操作不习惯 =.=所以改成了另一种方式(我不会告诉你其实本质没变). 项目中表格较多,所以复用性最重要 步骤一 先来个基本的表格展示 官例的tableData tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address:

  • layui实现table加载的示例代码

    js实现: layui.use(['table','form'], function() { $ = layui.jquery; table = layui.table; tableIns = initTable(); }); //加载列表 function initTable(){ // 执行渲染 tableIns = table.render({ id: 'idTest', elem : '#deviceTable', // 指定原始表格元素选择器(推荐id选择器) size: 'lg',

  • bootstrap table 多选框分页保留示例代码

    bootstrap table 多选框分页保留示例代码

    在使用bootstrap table的复选框功能的时候,由于采用服务端分页,当在第一页选择了某些数据,然后点击第二页选择一些数据,再次点回第一页,发现原先选择的数据已经清空了,原来的多选框并不支持翻页保留多选数据. 解决思路: 在分页的时候,吧原先选择的数据用一个全局变量保存,当再次翻页回来时,判断当前页数据是否存在于保存的数据数组中,存在则状态为选择.当然当取消选择的时候也要去删除数组中相应的数据. 为了解决这个问题,在查github上查文档发现有人提出了这个问题,并且作者wenzhixin

  • Java实现生成Excel树形表头完整代码示例

    Java实现生成Excel树形表头完整代码示例

    本文主要分享了Java实现生成Excel树形表头完整代码示例,没有什么好解释的,直接看看代码过程. 源数据格式: String[] targetNames = { "指标名称", "单位", "xx_yy1", "xx_yy2_zz1", "xx_yy2_zz2", "2017年5月_主营业务收入_累计", "2017年5月_主营业务收入_同比", "201

  • vue elementUI table 自定义表头和行合并的实例代码

    最近项目中做表格比较多,对element表格的使用,只需要传递进去数据,然后写死表头即可渲染. 但现实中应用中,如果写死表头,并且每个组件中写自己的表格,不仅浪费时间而且消耗性能.这个时候需要动态渲染表头. 而官方例子都是写死表头,那么为了满足项目需求,只能自己来研究一下. 1.自定义表头 代码如下,其实就是分了两部分,表格主数据是在TableData对象中,表头的数据保存在headerDatas,headerDatas.label其实就是表头的值,如果表头是"序号",那么header

  • Vue多种方法实现表头和首列固定的示例代码

    有时表格太大,滚动时信息查看不方便,需要对表格进行全局表头.首列固定, 上效果: 一.创建多个表格进行覆盖 思路:当页面滚动到临界值时,出现固定表头.首列 先创建一个活动表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> th, td { min

  • C# 实现TXT文档转Table的示例代码

    代码: public DataTable TXTToDataTable(string fileName, string columnName) { DataTable dt = new DataTable(); FileStream fs = new FileStream(fileName, System.IO.FileMode.Open, System.IO.FileAccess.Read); StreamReader sr = new StreamReader(fs, System.Text

  • vue+element table表格实现动态列筛选的示例代码

    vue+element table表格实现动态列筛选的示例代码

    需求:在用列表展示数据时,出现了很多项信息需要展示导致表格横向特别长,展示就不够明晰,用户使用起来可能会觉得抓不住自己的重点. 设想实现:用户手动选择表格的列隐藏还是展示,并且记录用户选择的状态,在下次进入该时仍保留选择的状态. 效果图如下: 原: 不需要的关掉默认的勾选: 实现代码: HTML部分就是用一个多选框组件展示列选项 用v-if="colData[i].istrue"控制显示隐藏,把列选项传到checkbox里再绑定勾选事件. <el-popover placemen

随机推荐