表格花式效果

简介:

对于table的一些基础信息不了解的,可以参考我以前写过的一篇《关于table的一些记录》。下面演示的代码,具体的源码可以参考此处

一、表格固定左边与顶部

公司最近要做个排期系统,当滚动表格的时候,需要将顶部和左边的分别固定起来。

1)固定顶部

原理就是用标签模拟出顶部的样式,通过脚本计算出高度,以及各个块的宽度,再将table中的thead的内容覆盖掉。

1. 样式:通过绝对定位,将ul中的内容覆盖中顶部。

<ul class="calendar-table-top-header">
  <li></li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
</ul>

2. 计算尺寸:通过获取到th标签的宽和高,赋给对应的li标签。涉及到了元素的offsetHeight、offsetWidth属性,更多关于尺寸的信息可以参考《JavaScript中尺寸、坐标

function fixedTopHeader($table) {
  $table.siblings('.calendar-table-top-header').remove();//移除原先的模拟顶部
  var $ul = $('<ul>').addClass('calendar-table-top-header'),
    $ths = $table.find('thead th');
  $ul.width($table.find('thead')[0].offsetWidth + 1);
  $.each($ths, function(key, value) {//遍历th标签,设置li的宽高
    var $th = $(value);
    var $child = $('<li>').css({
      height: $th[0].offsetHeight,
      width: $th[0].offsetWidth
    }).html($th.html());
    $ul.append($child);
  });
  $table.before($ul);
}

 

2)固定左边

固定左边与固定顶部的原理是一样的,代码也很类似。

1. 节流:创建元素的代码已经实现,接下来要实现执行上述代码的事件“scroll”,这里涉及到一个节流的概念,节流是一种代码优化。

如果不做节流,那么将会损耗性能,导致在滚定的时候,展示的固定元素一卡一卡的,很不流畅,在《JavaScript优化以及开发小技巧》中曾经解释过节流的概念。

 

二、表格中嵌套表格

嵌套的表格每一行的高度要与外面的表格一致,并且最后一行需要将滚动条的高度去除,否则会影响整个高度的展示。

1. 头部元素:头部“2016年11月”,如果用跨列colspan来做的话,每次都要计算列的个数,所以这里用了“caption”标签,不过在上下对齐方面没有th标签方便。

<table class="table table-bordered">
  <caption>2016年11月</caption>
  <tbody>
    <tr>...</tr>
  </tbody>
</table>

2. tr高度:这里的tr获取的是外面的table,不是嵌套的table。tr的高度有两个比较特殊,第一个和最后一个,分别要减去1和18,上边框与滚动条的高度。

$schedule.children('tbody').children('tr').each(function() {
    heights.push(this.getBoundingClientRect().height);
});
if (heights.length == 0)
    return;
heights[0] -= 1; //去除下边框
heights[heights.length - 1] -= 18;//去除滚动条的高度

3. 尺寸赋值:分别计算嵌套表格的宽度,算出总宽度,给包裹的div赋总宽度,再给嵌套表格的每个tr赋值。给包裹的div赋了个默认值“width: 2000px;”。

<div class="schedule-hidden">
  <div class="day-table" style="width: 2000px;">
    <table class="table table-bordered">
      <caption>2016年11月</caption>
      <tbody>
        <tr>...</tr>
      </tbody>
    </table>
    <table class="table table-bordered">
      <caption>2016年12月</caption>
      <tbody>
        <tr>...</tr>
      </tbody>
    </table>
  </div>
</div>

用的jQuery踩到了一个“height()”方法的小坑。

$tables.each(function() {
    var $this = $(this);
    width += this.offsetWidth;
    $this.children('caption').css('height', heights[0]); //如果用height 会将padding也算在内
    $this.find('tr').each(function(index) {
      $(this).height(heights[index + 1]);
    });
});
$dayContainer.find('.day-table').width(width);//嵌套表格的外包裹div的宽度,宽度小的话会让表格换行

4. 初始化隐藏:上面HTML代码中用到了“schedule-hidden”,做初始化隐藏,就会向下图那样,拉伸,影响体验。

但是如果用普通的“display:none”做隐藏,就会出现包裹的div宽度“width:0”,这是因为“none”内的元素没有物理尺寸,占据的空间位置不存在。

.table-schedule .schedule-hidden {
    display: none;
}

所以就用变通的方法,“height:0”来做隐藏。或者用“position和left”组合,或用“visibility”,或者用“opacity”。

.table-schedule .schedule-hidden {
    height: 0;
    /*position: absolute;
    left:-10000px;*/
    /*opacity: 0;*/
    /*visibility: hidden;*/
}

 


本文转自 咖啡机(K.F.J) 博客园博客,原文链接:http://www.cnblogs.com/strick/p/6418382.html   ,如需转载请自行联系原作者


相关文章
|
5天前
|
数据采集 自然语言处理 搜索推荐
基于Qwen3的Embedding和Rerank模型系列,开源!
近年来,随着大规模预训练语言模型(LLM)的飞速发展,文本嵌入(Embedding)和重排序(Reranking)技术在搜索引擎、问答系统、推荐系统等多个领域的重要性愈发凸显。
718 72
|
4天前
|
安全 JavaScript 前端开发
Typora免费下载,不需要激活,Typora早期版本,Markdown编辑器
Typora是一款支持实时预览的Markdown编辑器,跨平台兼容Windows、macOS和Linux,适合写作、笔记和技术文档。本文提供合法安全的Typora早期免费版安装方案及常见问题解决方法,助你快速上手。同时详细介绍了Markdown基础用法,包括标题、加粗、斜体、列表、链接、图片、引用、代码块和表格等常用语法,帮助用户高效编写结构化内容。
931 15
|
4天前
|
云安全 人工智能 安全
|
4天前
|
人工智能 前端开发 Devops
通义灵码带你玩转开发者常用的MCP(合辑,持续更新中)
今天我们精选了与开发者息息相关和比较热门的MCP 服务,总结了这些技术服务在实际开发的最佳实践,涵盖了从前端开发、后端开发、DevOps、测试、运维等关键环节,及非研发领域中的热度较高的MCP服务。我们通过直播、图文等形式带你了解和学习!
595 3
|
6天前
|
存储 前端开发 JavaScript
2025 最新前端 100 道经典面试题及详细答案汇总整理
本文整理了100道前端常见面试题及其详细答案,涵盖HTML、CSS、JavaScript等多个领域,助你系统复习前端知识。内容包括HTML5新特性、CSS盒模型、Flex与Grid布局区别、选择器优先级等核心知识点,以及伪类和伪元素的区别等细节。适合准备面试或巩固基础的开发者学习。资源可从文末链接下载。
468 1
|
16天前
|
人工智能 API 开发者
一文带你 "看见" MCP 的过程,彻底理解 MCP 的概念
本文介绍了模型上下文协议(MCP)的基本概念、工作原理及其应用过程。MCP 是一种连接 AI 助手与数据系统的开放标准,旨在帮助大模型生成更高质量的响应。文章从 RAG 和 Function Calling 的理论基础出发,详细解析了 MCP 的核心组件(主机、客户端、服务器)及优势,并通过 ModelScope 和 Cherry Studio 实例展示其操作流程。同时,文中指出了 MCP 存在的手动配置复杂、工具稳定性不足等问题,但也强调其作为过渡协议的重要性,为未来智能体间的协同和工具使用提供了方向。
1592 56
一文带你 "看见" MCP 的过程,彻底理解 MCP 的概念
|
8天前
|
人工智能 Java 决策智能
Spring AI Alibaba Graph:多智能体框架实践
Spring AI Alibaba 是一个面向 Java 开发者的开源人工智能框架,旨在简化 AI 应用开发。本文重点介绍其 Graph 组件,用于解决工作流与多智能体协作问题。Graph 组件通过声明式编程接口,提供统一的上下文管理、消息记忆、人工确认节点等功能,支持复杂 AI 应用的构建。
|
8天前
|
人工智能 安全 测试技术
信条:阿里云AI攻防安全启示录
解读AI时代下的安全攻防新态势
1110 11
|
11天前
|
人工智能 IDE 开发工具