使用html+css+layui实现动态表格组件

1、概述

需求,表格第一列指标可配置通过后端api传进来,表格显示数据以及鼠标触摸后气泡弹出层提示信息都是从后端传过来,实现动态表格的组件!!实现效果如下:

接口标准数据格式如下:

javascript 复制代码
{
    "data": {
        "date": [
            "8.20",
            "8.21",
            "8.22",
            "8.23",
            "8.24",
            "8.25",
            "8.26",
            "8.27",
            "8.28",
            "8.29",
            "8.30",
            "8.31"
        ],
        "hosDays": [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12"
        ],
        "maxWidth": "",
        "tableData": {
            "中心静脉插管": [
                {
                    "id": "25",
                    "show": "",
                    "hide": ""
                },
                {
                    "id": "26",
                    "show": "",
                    "hide": ""
                },
                {
                    "id": "27",
                    "show": "",
                    "hide": ""
                },
                {
                    "id": "28",
                    "show": "",
                    "hide": ""
                },
                {
                    "id": "29",
                    "show": "",
                    "hide": ""
                },
                {
                    "id": "30",
                    "show": "<img style='width:20px;height:20px;' src='/pharmacistws/image/CENTER.jpg'/>",
                    "hide": ""
                },
                {
                    "id": "31",
                    "show": "<img style='width:20px;height:20px;' src='/pharmacistws/image/CENTER.jpg'/>",
                    "hide": ""
                },
                {
                    "id": "32",
                    "show": "",
                    "hide": ""
                },
                {
                    "id": "33",
                    "show": "",
                    "hide": ""
                },
                {
                    "id": "34",
                    "show": "",
                    "hide": ""
                },
                {
                    "id": "35",
                    "show": "",
                    "hide": ""
                },
                {
                    "id": "36",
                    "show": "",
                    "hide": ""
                }
            ],
            "血常规": [
                {
                    "id": "49",
                    "show": "",
                    "hide": ""
                },
                {
                    "id": "50",
                    "show": "",
                    "hide": ""
                },
                {
                    "id": "51",
                    "show": "",
                    "hide": ""
                },
                {
                    "id": "52",
                    "show": "",
                    "hide": ""
                },
                {
                    "id": "53",
                    "show": "",
                    "hide": ""
                },
                {
                    "id": "54",
                    "show": "<img style='width:20px;height:20px;' src='/pharmacistws/image/BLOOD.jpg'/>",
                    "hide": "<div><span style='color:black'>07:00 白细胞 mg <span style='color:red'>10↓</span>  (11~20) </span><br/><span style='color:black'>07:00 血小板 mg 100  (100~300) </span><br/><span style='color:black'>07:00 中性粒细胞 mg <span style='color:red'>10↓</span>  (11~20) </span><br/></div>"
                },
                {
                    "id": "55",
                    "show": "<img style='width:20px;height:20px;' src='/pharmacistws/image/BLOOD.jpg'/>",
                    "hide": "<div><span style='color:black'>07:00 白细胞 mg 12  (11~20) </span><br/><span style='color:black'>07:00 白细胞 mg 20  (11~20) </span><br/><span style='color:black'>07:15 血小板 mg <span style='color:red'>80↓</span>  (100~300) </span><br/><span style='color:black'>07:00 血红蛋白 mg <span style='color:red'>25↑</span>  (11~20) </span><br/><span style='color:black'>07:00 中性粒细胞 mg <span style='color:red'>8↓</span>  (11~20) </span><br/><span style='color:black'>07:00 中性粒细胞 mg 20  (11~20) </span><br/></div>"
                },
                {
                    "id": "56",
                    "show": "<img style='width:20px;height:20px;' src='/pharmacistws/image/BLOOD.jpg'/>",
                    "hide": "<div><span style='color:green'>未见异常</span></div>"
                },
                {
                    "id": "57",
                    "show": "",
                    "hide": ""
                },
                {
                    "id": "58",
                    "show": "",
                    "hide": ""
                },
                {
                    "id": "59",
                    "show": "",
                    "hide": ""
                },
                {
                    "id": "60",
                    "show": "",
                    "hide": ""
                }
            ]
        }
    },
    "r_code": 1
}

2、实现代码

js代码

javascript 复制代码
// 渲染表格数据
function renderTable(eleIdName, eleIdName1, eleIdName2,data) {
    var tableHeader = document.querySelector(eleIdName);
    var dayNum = document.querySelector(eleIdName1);
    var tableHide = document.getElementById(eleIdName2);
    // 渲染列头
    for (var i = 0; i < data.date.length; i++) {
        var headerCell = document.createElement('div');
        headerCell.classList.add('header-cell');
        headerCell.textContent = data.date[i];
        tableHeader.appendChild(headerCell);

        var headerCell1 = document.createElement('div');
        headerCell1.classList.add('header-cell');
        headerCell1.textContent = data.hosDays[i];
        dayNum.appendChild(headerCell1);
    }
    // 渲染数据
    var dataHtml = '';
    for (var key in data.tableData) {
        dataHtml += '<div class="table-row">';
        dataHtml += '<div class="cell">';
        dataHtml += key;
        dataHtml += '</div>';
        for (var i = 0; i < data.tableData[key].length; i++) {
            dataHtml += '<div class="cell" id="'+data.tableData[key][i].id+'" onmouseover="tableShow('+data.tableData[key][i].id+')" onmouseout="tableCloseTip()">';
            dataHtml += data.tableData[key][i].show;
            dataHtml += '</div>';
            var newElement = document.createElement('div');
            newElement.id= "hide_"+data.tableData[key][i].id;
            newElement.innerHTML = data.tableData[key][i].hide;
            tableHide.appendChild(newElement);
        }
        dataHtml += '</div>';
    }
    dayNum.insertAdjacentHTML('afterend', dataHtml);
}

function tableShow(d) {
    layui.use(['layer'],function(){
        var layer = layui.layer;
        var hide = document.getElementById("hide_"+d);
        if(hide.innerHTML!=='') {
            tips = layer.tips(hide.innerHTML, "#"+d, {
                tips: [1, '#F8F8F8'],
                area: ['300px','auto'],
                time: 60000
            });
            // $("#layui-layer" + tips).css("position","fixed");
        }
    });
}

function tableCloseTip () {
    layui.use(['layer'],function(){
        var layer = layui.layer;
        layer.close(tips);
    });
}

如何使用

javascript 复制代码
                var tableHtml = '            <div style="overflow-x: auto;">\n' +
                    '                <div class="table">\n' +
                    '                    <div class="table-header" id="tableHeader">\n' +
                    '                        <div class="header-cell">日期</div>\n' +
                    '                        <!-- 更多列头 -->\n' +
                    '                    </div>\n' +
                    '                    <div class="table-header" id="inHosDay">\n' +
                    '                        <div class="header-cell">住院日</div>\n' +
                    '                    </div>\n' +
                    '                    <!-- 更多单元格 -->\n' +
                    '                </div>\n' +
                    '                <div id="tableHide" style="display:none">\n' +
                    '\n' +
                    '                </div>\n' +
                    '            </div>'
                $("#table1").append(tableHtml);
                renderTable("#tableHeader","#inHosDay",'tableHide',ret.data);

注意需要引用layui组件

相关推荐
web守墓人42 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架