自己造轮子之如何用HTML+JS搭建表头/列固定Table

专业404_反省版

已于 2023-08-21 15:45:55 修改

阅读量3.5k

点赞数 15

分类专栏：从入坑到入土文章标签： javascript ecmascript 前端交互

于 2023-08-21 15:45:11 首次发布

本文链接：https://blog.youkuaiyun.com/qq_38990345/article/details/132336590

版权

本文详细描述了如何在jQuery+HTML项目中实现表头和列的固定功能，通过拆分表头、表体和左右列表，动态渲染数据并调整CSS样式，确保表格的交互性和适应性。作者强调了自定义组件开发的重要性以满足产品需求，尽管这可能较为繁琐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

依旧是jQuery+html架构的前端项目，依旧用不了element.ui的组件。但产品已经提过无数遍想要表头固定、列固定的报表展示，没办法，只能借由排期不算太满的工作时间手肝一个HTML+JS的表头/列固定Table组件，命名为 fixedscrolltable 。

一、基本思路

参考el-table交互可知，想要固定表头、固定列，需要将主表拆成4块：主表表头、主表表体；左侧列表头、左侧列表体。

这里还补充了class名为table-leftmodel的div，是为了突出左侧列固定时的shadow。

二、数据渲染

确认四块区域后，接下来就是往里填数据。

假如表头项是动态获取的，那么表单数据应该分为headers和rows：

2.1 拼接表头

用到 isfixed 和 fixednum 传值，满足部分固定和随机列固定。

// 主表的表头
var header_html = '<tr>';
var fixheader_html = '';
// 固定列的表头
var leftheader_html = '<tr>';

for (var h = 0; h < header.length; h ++) {
    header_html += '<th>' + header[h] + '</th>';
    fixheader_html += '<div>' + header[h] + '</div>';
    if (isfixed == 'true' && h < fixednum) {
        lefth