原生web实现不固定列数的表格、随机列、document、querySelector、forEach、hasOwnProperty、call、includes

文章目录

  • 效果图
  • 公共样式
  • 第一种解决方案(不推荐)
  • 第二种解决方案(强烈推荐)

效果图

randomColumnTable

公共样式

.d_f {
    display: flex;
}

.flex_1 {
    flex: 1;
}

.jc_sb {
    justify-content: space-between;
}

.ai_c {
    align-items: center;
}

.bc_ccc {
    background-color: #cccccc;
}

/* ------------padding------------ */
.bs_bb {
    box-sizing: border-box;
}

.p_6 {
    padding: 6px;
}

.p_lr_6 {
    padding-left: 6px;
    padding-right: 6px;
}

.p_lr_10 {
    padding-left: 10px;
    padding-right: 10px;
}

/* - */
.ta_c {
    text-align: center;
}

/* ----------- */
.fw_700 {
    font-weight: 700;
}

/* ------------------- */
.b_1s_000 {
    border: 1px solid #000000;
}

.bl_1s_000 {
    border-left: 1px solid #000000;
}

.br_1s_000 {
    border-right: 1px solid #000000;
}

.bt_1s_000 {
    border-top: 1px solid #000000;
}


.bb_1s_000 {
    border-bottom: 1px solid #000000;
}

/* ----------------------- */
.h_68 {
    height: 68px;
}

.lh_68 {
    line-height: 68px;
}

.h_30 {
    height: 30px;
}

.lh_30 {
    line-height: 30px;
}

第一种解决方案(不推荐)

html

<div>
    <div>
        <h1 class="ta_c">表格1</h1>

        <div class="b_1s_000">
            <div id="idTableHead" class="d_f jc_sb bc_ccc fw_700"></div>

            <div id="idTableBody"></div>
        </div>
    </div>

    <div>
        <h1 class="ta_c">表格2</h1>

        <div class="b_1s_000">
            <div id="idTableHead2" class="d_f jc_sb bc_ccc fw_700"></div>

            <div id="idTableBody2"></div>
        </div>
    </div>
</div>

JavaScript

(function init() {
    // 表格1
    createTable([
        {
            id: 'a1',
            title: 'ID'
        },
        {
            id: 'b1',
            title: '标题'
        },
        {
            id: 'c1',
            title: '昵称'
        },
        {
            id: 'd1',
            title: '年龄'
        },
        {
            id: 'e1',
            title: '等级'
        }
    ], [
        {
            id: 'a1',
            title: '标题1',
            name: '归零',
            age: 23,
            type: '超级管理员'
        },
        {
            id: 'b1',
            title: '标题2',
            name: '趴在墙头等红杏',
            age: 25,
            type: '协管员'
        },
        {
            id: 'c1',
            title: '标题3',
            name: '零壹',
            age: 20,
            type: '观察员'
        }
    ], 'idTableHead', 'idTableBody');

    // 表格2
    createTable([
        {
            id: 'b1',
            title: '标题'
        },
        {
            id: 'c1',
            title: '昵称'
        },
        {
            id: 'd1',
            title: '年龄'
        },
        {
            id: 'e1',
            title: '等级'
        }
    ], [
        {
            id: 'a1',
            title: '标题1',
            name: '归零',
            age: 23,
            type: '超级管理员'
        },
        {
            id: 'b1',
            title: '标题2',
            name: '趴在墙头等红杏',
            age: 25,
            type: '协管员'
        },
        {
            id: 'c1',
            title: '标题3',
            name: '零壹',
            age: 20,
            type: '观察员'
        }
    ], 'idTableHead2', 'idTableBody2', ['id']);
})();

/**
 * 创建表格
 * @param {array} tableH 表头
 * @param {array} tableH 表内容
 * @param {string} idH 表头id
 * @param {string} idB 表内容id
 * @param {array} arr 不需要渲染的字段
 */
function createTable(tableH, tableB, idH, idB, arr = []) {
    let idHEL = document.querySelector(`#${idH}`),
        idBEL = document.querySelector(`#${idB}`),
        elTableH = '',
        elTableB = '';

    tableH.forEach((item, i) => {
        elTableH += `<div class="flex_1 ta_c h_30 lh_30 ${i !== 0 ? 'bl_1s_000' : ''}">${item.title}</div>`;
    });

    idHEL.innerHTML = elTableH;

    tableB.forEach(item => {
        let elB = '<div class="d_f jc_sb ai_c bt_1s_000">',
            i = 0;

        for (const key in item) {
            if (Object.hasOwnProperty.call(item, key)) {
                const val = item[key];

                if (!arr.includes(key)) {
                    elB += `<div class="flex_1 ta_c h_30 lh_30 ${i !== 0 ? 'bl_1s_000' : ''}">${val}</div>`;
                    i++;
                }
            }
        }

        elTableB += elB + '</div>';
    });

    idBEL.innerHTML = elTableB;
}

第二种解决方案(强烈推荐)

html

<div>
    <div>
        <h1 class="ta_c">表格3</h1>

        <div id="idTable3" class="b_1s_000"></div>
    </div>

    <div>
        <h1 class="ta_c">表格4</h1>

        <div id="idTable4" class="b_1s_000"></div>
    </div>
</div>

JavaScript

(function init() {
	let tableArr = [
		{
			id: 'a1',
			title: '标题3',
			name: '零壹',
			age: 20,
			type: '观察员'
		},
		{
			id: 'b1',
			title: '标题2',
			name: '趴在墙头等红杏',
			age: 25,
			type: '协管员'
		},
		{
			id: 'c1',
			title: '标题1',
			name: '归零',
			age: 23,
			type: '超级管理员'
		}
	];

	// 表格3
	createTableRandomColumn(
		[
			{
				title: '角色',
				name: 'type'
			},
			{
				title: '昵称',
				name: 'name'
			},
			{
				title: '年龄',
				name: 'age'
			}
		],
		tableArr,
		'idTable3'
	);

	// 表格4
	createTableRandomColumn(
		[
			{
				title: '编号',
				name: 'id',
				textAlignH: 'center',
				textAlignB: 'center'
			},
			{
				title: '昵称',
				name: 'name',
				textAlignH: 'center',
				textAlignB: 'left'
			},
			{
				title: '年龄',
				name: 'age',
				textAlignH: 'center',
				textAlignB: 'center'
			},
			{
				title: '标题',
				name: 'title',
				textAlignH: 'center',
				textAlignB: 'left'
			},
			{
				title: '角色',
				name: 'type',
				textAlignH: 'center',
				textAlignB: 'center'
			}
		],
		tableArr,
		'idTable4'
	);
})();

/**
* 创建表格，自定义列的顺序
* @param {array} tableTemplate 表格模板，定义表头，列对应的字段
* @param {array} tableBody 表格内容
* @param {string} idBox 表格容器id
*/
function createTableRandomColumn(tableTemplate, tableBody, idBox) {
	let idBoxEl = document.querySelector(`#${idBox}`),
		elHead = '<div class="d_f jc_sb bc_ccc fw_700">',
		elBody = '<div>';
	
	tableTemplate.forEach((item, i) => {
		elHead += `<div class="flex_1 h_30 lh_30 bs_bb p_lr_10 ${i !== 0 ? 'bl_1s_000' : ''}" style="text-align: ${item.textAlignH ? item.textAlignH : 'center'}">${item.title}</div>`;
	});
	
	tableBody.forEach(item => {
		let elB = '<div class="d_f jc_sb ai_c bt_1s_000">';
		
		tableTemplate.forEach((items, i) => {
			elB += `<div class="flex_1 h_30 lh_30 bs_bb p_lr_10 ${i !== 0 ? 'bl_1s_000' : ''}" style="text-align: ${items.textAlignB ? items.textAlignB : 'center'}">${item[items.name]}</div>`;
		});
		
		elB += '</div>';
		
		elBody += elB;
	});
	
	elHead += '</div>';
	elBody += '</div>';
	
	idBoxEl.innerHTML = elHead + elBody;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/93224.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Ribbon:listOfServers ,${variableName:defaultValue}

Ribbon:listOfServers ,${variableName:defaultValue}

解释&#xff1a; 配置了address的地址,请求会走address&#xff0c;也就是http://127.0.0.1:8081&#xff0c;通常用户与别的后端服务进行联调设置为其本地服务的ip。 如果address的地址被注释掉&#xff0c;如下面所示&#xff0c;类似这样的占位符${variableName:defaultVa…
阅读更多...
Kafka学习笔记

Kafka学习笔记

目录 常见术语如何解决数据重复和数据乱序幂等性幂等性的缺陷事务事务原子性事务原理流程图 如何解决数据积压解决方法 Kafka的高水位&#xff08;HW&#xff09;和Leader Epoch副本同步机制解析Leader Epoch是如何解决消息丢失和消息不一致的问题的 常见术语 Kafka的三层消息…
阅读更多...
Web安全测试(三)：SQL注入漏洞

Web安全测试(三)：SQL注入漏洞

一、前言 结合内部资料&#xff0c;与安全渗透部门同事合力整理的安全测试相关资料教程&#xff0c;全方位涵盖电商、支付、金融、网络、数据库等领域的安全测试&#xff0c;覆盖Web、APP、中间件、内外网、Linux、Windows多个平台。学完后一定能成为安全大佬&#xff01; 全部…
阅读更多...
简述docker映射（Mapping）和挂载（Mounting）

简述docker映射（Mapping）和挂载（Mounting）

映射的概念&#xff1a; 将容器内的端口映射到主机的端口上&#xff0c;这样就可以通过主机的网络接口与容器内部进行通信。主机上对应端口的请求会被转发到容器内部&#xff0c;从而实现对容器内部程序的通信访问&#xff08;注意&#xff01;这里提到的容器内部的端口并不一定…
阅读更多...
arcgis的MapServer服务查询出来的结果geometry坐标点带*的问题

arcgis的MapServer服务查询出来的结果geometry坐标点带*的问题

不知道小伙伴使用arcgis server服务做查询的时候&#xff0c;有没有遇到下面的问题 原因是查询结果中出现*字符 这个问题一直困扰了我很久&#xff1a;因为从数据库查询的坐标点是没有问题的。 一开始有同事遇到过&#xff0c;说重新插入下就好了&#xff0c;有时候确实能解决…
阅读更多...
Qt 获取文件图标、类型 QFileIconProvider

Qt 获取文件图标、类型 QFileIconProvider

Qt中获取系统图标、类型是通过QFileIconProvider来实现的&#xff0c;具体如下&#xff1a; 一、Qt获取系统文件图标1、获取文件夹图标QFileIconProvider icon_provider;QIcon icon icon_provider.icon(QFileIconProvider::Folder);2、获取指定文件图标QFileInfo file_info(n…
阅读更多...
最详细jdk安装以及配置环境（保姆级教程）

最详细jdk安装以及配置环境（保姆级教程）

一.进入oracle官网&#xff0c;下载jdk oracle官网&#xff1a;Oracle | Cloud Applications and Cloud Platform ps:不同的浏览器&#xff0c;可能进入oracle官网&#xff0c;会只显示部分内容&#xff0c;所以建议使用google Chrome浏览器 在下载之前&#xff0c;首先需要去…
阅读更多...
UML四大关系

UML四大关系

文章目录 引言UML的定义和作用UML四大关系的重要性和应用场景关联关系继承关系聚合关系组合关系 UML四大关系的进一步讨论UML四大关系的实际应用软件开发中的应用其他领域的应用 总结 引言 在软件开发中&#xff0c;统一建模语言&#xff08;Unified Modeling Language&#x…
阅读更多...
7 集群基本测试

7 集群基本测试

1. 上传小文件到集群 在hadoop路径下执行命令创建一个文件夹用于存放即将上传的文件&#xff1a; [atguiguhadoop102 ~]$ hadoop fs -mkdir /input上传&#xff1a; [atguiguhadoop102 hadoop-3.1.3]$ hadoop fs -put wcinput/work.txt /input2.上传大文件 [atguiguhadoop1…
阅读更多...
Mybatis-Plus快速入门

Mybatis-Plus快速入门

目录 一、基础工程 1、创建一个数据库&#xff1a;mp 2、添加数据 3、创建初始工程 4、添加依赖 二、Mybatis Mybatis-Plus 1、创建子工程&#xff1a;mybatis-plus-simple 2、在子工程下添加配置 2.1Mybatis实现查询User 2.1.1、编写User实体对象 2.1.2、编写UserMa…
阅读更多...
pdf.js构建时，报Cannot read property ‘createChildCompiler‘ of undefined #177的解决方法

pdf.js构建时，报Cannot read property ‘createChildCompiler‘ of undefined #177的解决方法

在本地和CI工具进行构建时&#xff0c;报如下错误。 Cannot read property createChildCompiler of undefined #177解决方法&#xff1a; 找到vue.config.js&#xff0c;在 module.exports {parallel: false, //新增的一行chainWebpack(config) {....config.module.rule(&…
阅读更多...
微信小程序 基于Android的美容理发师预约管理系统

微信小程序 基于Android的美容理发师预约管理系统

&#xff0c;本系统主要根据管理员、用户及理发师的实际需要&#xff0c;方便用户利用互联网实现对商品信息进行立即订购&#xff0c;同时让管理者可以通过这个系统对用户实际需求以及各信息进行管理。设计该系统主要目的是为了方便用户、理发师可以有一个非常好的平台体验&…
阅读更多...
Qt/C++编写视频监控系统80-远程回放视频流

Qt/C++编写视频监控系统80-远程回放视频流

一、前言 远程回放NVR或者服务器上的视频文件&#xff0c;一般有三种方式&#xff0c;第一种是调用厂家的SDK&#xff0c;这个功能最全&#xff0c;但是缺点明显就是每个厂家的设备都有自己的SDK&#xff0c;只兼容自家的设备&#xff0c;如果你的软件需要接入多个厂家的&…
阅读更多...
利用LLM模型微调的短课程；钉钉宣布开放智能化底座能力

利用LLM模型微调的短课程；钉钉宣布开放智能化底座能力

&#x1f989; AI新闻 &#x1f680; 钉钉宣布开放智能化底座能力AI PaaS&#xff0c;推动企业数智化转型发展 摘要&#xff1a;钉钉在生态大会上宣布开放智能化底座能力AI PaaS&#xff0c;与生态伙伴探寻企业服务的新发展道路。AI PaaS结合5G、云计算和人工智能技术的普及和…
阅读更多...
前端如何走通后端接口

前端如何走通后端接口

0 写在前面 现在基本都是前后端分离的项目了&#xff0c;那么前端小伙伴如何获取后端小伙伴接口呢&#xff1f; 1 条件 同一WiFi下&#xff0c;让后端小伙伴分享出自己的ip地址&#xff1a; 步骤1:winr调出运行界面 步骤2&#xff1a;cmd调出命令行窗口 步骤3&#xff1a;…
阅读更多...
接口多态 面试题及习题

接口多态 面试题及习题

基础题目 第一题&#xff1a;概念辨析 什么是接口&#xff0c;如何定义接口&#xff1f; 接口&#xff0c;是Java语言中一种引用类型&#xff0c;是方法的集合。使用interface关键定义接口&#xff0c;其中可以定义抽象方法&#xff0c;默认方法&#xff0c;私有方法&#xf…
阅读更多...
ESP32应用教程（0）— PMW3901MB光流传感器

ESP32应用教程（0）— PMW3901MB光流传感器

文章目录 前言 1 传感器介绍 1.1 关键特征 1.2 关键参数 2 硬件概述 2.1 信号引脚 2.2 参考电路图 3 寄存器 3.1 寄存器列表 3.2 性能优化寄存器 4 代码说明 4.1 结构体说明 4.2 编译说明 5 波形分析 前言 本文介绍了在 ESP32 DEVKIT V1 开发板上开发 PMW3901MB…
阅读更多...
VR防地质灾害安全教育：增强自然灾害知识，提高自我保护意识

VR防地质灾害安全教育：增强自然灾害知识，提高自我保护意识

VR防地质灾害安全教育系统是一种虚拟仿真技术&#xff0c;可以通过虚拟现实技术模拟地震、泥石流、滑坡等地质灾害的发生和应对过程&#xff0c;帮助人们提高应对突发自然灾害的能力。这种系统的优势在于可以增强自然灾害知识&#xff0c;提高自我保护意识&#xff0c;锻炼人们…
阅读更多...
4. 池化层相关概念

4. 池化层相关概念

4.1 池化层原理 ① 最大池化层有时也被称为下采样。 ② dilation为空洞卷积&#xff0c;如下图所示。 ③ Ceil_model为当超出区域时&#xff0c;只取最左上角的值。 ④ 池化使得数据由5 * 5 变为3 * 3,甚至1 * 1的&#xff0c;这样导致计算的参数会大大减小。例如1080P的电…
阅读更多...
R语言实现网状Meta分析（1）

R语言实现网状Meta分析（1）

#R语言实现网状Meta library(gemtc) help(package"gemtc") data<-gemtc::smoking #注意按照实例格式编写数据 net<-mtc.network(data$data.ab) #网状图 plot(net,mode"circle",displaylabelsT,boxed.labelF) summary(net) #网状model model<-mtc…
阅读更多...
最新文章

Copyright @ 2022~2023