突破编程_前端_JS编程实例(自适应表格列宽)

2024-03-10 22:04

本文主要是介绍突破编程_前端_JS编程实例(自适应表格列宽),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1 开发目标

针对如下的表格组件:

在这里插入图片描述

根据表格的各个列字符串宽度动态调整表格列宽:

在这里插入图片描述

2 详细需求

本组件目标是提供一个自动调整 HTML 表格列宽的解决方案,通过 JS 实现动态计算并调整表格每列的宽度,以使得表格能够自适应容器宽度,同时保持列宽的合理性。

2.1 容器与表格元素获取

  • 组件需根据传入的容器获取其子元素集合中的表格元素。
  • 计算每列中最长字符串所占的宽度:最长字符串宽度的计算应基于字符串的渲染宽度,而非简单的字符数,以考虑不同字符宽度的差异。

2.2 列宽调整规则

  • 组件需根据计算出的每列最长宽度,调整每一列的列宽。
  • 调整后的表格宽度需占满其父容器的宽度。
  • 若所有列的最长宽度之和不大于传入容器的宽度,则按照各自最长宽度所占的比例调整每一列的列宽,以确保表格充分利用可用空间。
  • 若所有列的最长宽度之和大于传入容器的宽度,则按照以下优先级进行调整:
    • 最长宽度不大于 100px 的列,直接按其最长宽度设置列宽。
    • 对于其他列,按照各自最长宽度所占的比例调整列宽,以在有限的空间内尽可能保持列宽的合理性。
    • 若全部最长宽度不大于 100px 的列的列宽之和已经大于传入容器的宽度,则所有列均按照各自最长宽度所占的比例调整列宽,以确保表格不会超出容器宽度。

3 代码实现

首先创建一个 neat_tableparse.js 文件,该文件用于本组件的工具类、表格自适应处理函数的代码构建。

(1)在具体的业务代码编写之前,先实现一个工具类以及一些工具方法,方便后面调用:

class CommonUtil {// 计算文本在页面所占 px 宽度static calcTextWidth(str, fontSize) {let span = document.createElement('span');document.body.appendChild(span);span.innerHTML = str;span.style.visibility = 'hidden';if(fontSize){span.style.fontSize = fontSize;}let width = span.offsetWidth;document.body.removeChild(span);return width;}
}

(2)接下来,定义一个处理表格自适应列宽的函数:

function parseTable(table) {// 最长宽度不大于该变量的列,直接按其最长宽度设置列宽// 若全部最长宽度不大于该变量的列的列宽之和已经大于传入容器的宽度,则所有列均按照各自最长宽度所占的比例调整列宽,以确保表格不会超出容器宽度const miniShowWidth = 100;

其中,定义了一个变量 miniShowWidth,该变量是指:最长宽度不大于该变量的列,直接按其最长宽度设置列宽。

(3)然后,获取每列最长宽度,将其存入 colMaxWidths 数组中:

	// 获取每列最长宽度,将其存入 colMaxWidths 数组中let colMaxWidths = [];let trs = table.getElementsByTagName('tr');if (!trs) {return;}for (let i = 0; i < trs.length; i++) {const tr = trs[i];let objs = null;objs = tr.getElementsByTagName('th');if (!objs || objs.length == 0) {objs = tr.getElementsByTagName('td');}if (!objs || objs.length == 0) {return;}if (objs.length > 0) {for (let index = 0; index < objs.length; index++) {const obj = objs[index];if (colMaxWidths.length <= index) {colMaxWidths.push(0);}let width = CommonUtil.calcTextWidth(obj.innerText) + 16 ;   //这里的 16 是在 css 中定义的 paddingcolMaxWidths[index] = (colMaxWidths[index] > width) ? colMaxWidths[index] : width;}}}

(4)本函数是通过对 colgroups 的子元素 col 的宽度设置来控制表格列宽的自适应,所以接下来需要获取或创建 colgroup 元素,以及创建或补齐 col 元素:

	// 获取或创建 colgroup 元素let colgroups = table.getElementsByTagName('colgroup');if (!colgroups || 0 == colgroups.length) {let colgroup = document.createElement('colgroup');table.appendChild(colgroup);colgroups = table.getElementsByTagName('colgroup');}// 创建或补齐 col 元素let cols = colgroups[0].getElementsByTagName('col');let colNum = cols ? cols.length : 0;for (let index = colNum; index < colMaxWidths.length; index++) {let col = document.createElement('col');colgroups[0].appendChild(col);}cols = colgroups[0].getElementsByTagName('col');

(5)根据需求中对不同宽度的列处理,首先需要获取父容器宽度以及获取所有列的最长宽度之和:

	// 获取父容器宽度let parentWidth = table.parentElement.offsetWidth;// 获取所有列的最长宽度之和let sumColMaxWidth = 0;colMaxWidths.forEach(element => {sumColMaxWidth += element;});

(6)若所有列的最长宽度之和不大于传入容器的宽度,则按照各自最长宽度所占的比例调整每一列的列宽:

	if (sumColMaxWidth <= parentWidth) {    // 若所有列的最长宽度之和不大于传入容器的宽度,则按照各自最长宽度所占的比例调整每一列的列宽for (let index = 0; index < colMaxWidths.length; index++) {cols[index].width = (colMaxWidths[index] / sumColMaxWidth) * parentWidth + 'px';}} 

(7)否则则处理全部最长宽度不大于 miniShowWidth 的列的列宽之和小于传入容器的宽度:

	else {// 获取所有列的最长宽度不大于 miniShowWidth 的列的列宽之和let sumColMiniShowWidth = 0;let sumOtherColsMaxWidth = 0;colMaxWidths.forEach(element => {if(element <= miniShowWidth){sumColMiniShowWidth += element;}else{sumOtherColsMaxWidth += element;}});if(sumColMiniShowWidth < parentWidth){ //若全部最长宽度不大于 miniShowWidth 的列的列宽之和小于传入容器的宽度let parentWidthOffset = parentWidth-sumColMiniShowWidth;for (let index = 0; index < colMaxWidths.length; index++) {if(colMaxWidths[index] > miniShowWidth && sumOtherColsMaxWidth>0){cols[index].width = (colMaxWidths[index] / sumOtherColsMaxWidth) * parentWidthOffset + 'px';}else{cols[index].width = miniShowWidth + 'px';}}}

(8)最后处理若全部最长宽度不大于 sumColMaxWidth 的列的列宽之和已经大于传入容器的宽度,则所有列均按照各自最长宽度所占的比例调整列宽,以确保表格不会超出容器宽度:

		else{  // 若全部最长宽度不大于 sumColMaxWidth 的列的列宽之和已经大于传入容器的宽度,则所有列均按照各自最长宽度所占的比例调整列宽,以确保表格不会超出容器宽度。for (let index = 0; index < colMaxWidths.length; index++) {cols[index].width = (colMaxWidths[index] / sumColMaxWidth) * parentWidth + 'px';}}}
}

至此,整个处理表格自适应列宽的函数构建结束。

(9)完成自适应表格列宽函数的代码编写后,可以创建 neat_tableparse.html 文件,调用该函数:

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>header tab</title><style>html {height: 100%;}body {margin: 0;height: 100%;}table {  border-collapse: collapse;} th,td {border: 1px solid #ddd;padding: 8px;text-align: left;word-break: break-all;}th {background-color: #f2f2f2;}</style>
</head><body><div id="divMain" style="margin-top: 100px;margin-left: 100px;height: 400px;width: 600px;border: 1px solid #aaa;overflow: hidden;"><table cellspacing="0" ><thead><tr><th>col1</th><th>col2列2</th><th>col3</th></tr></thead><tbody><tr><td>val_1_1</td><td>val_1_2</td><td>val_1_3</td></tr><tr><td>val_2_1</td><td>val_2_2</td><td>val_2_322222222222222</td></tr><tr><td>val_3_1</td><td>val_3_2</td><td>val_3_3</td></tr></tbody></table></div>
</body>
<script src="./test.js"></script>
<script>let container = document.getElementById('divMain');let tables = container.querySelectorAll("table");tables.forEach(element => {parseTable(element);});
</script></html>

重点注意:样式表中,要将 td 的单词中断设置为: break-all; ,否则有可能设置列宽失败,表格宽度会超出父容器宽度。

这篇关于突破编程_前端_JS编程实例(自适应表格列宽)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/795666

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

C#实现将Excel表格转换为图片(JPG/ PNG)

《C#实现将Excel表格转换为图片(JPG/PNG)》Excel表格可能会因为不同设备或字体缺失等问题,导致格式错乱或数据显示异常,转换为图片后,能确保数据的排版等保持一致,下面我们看看如何使用C... 目录通过C# 转换Excel工作表到图片通过C# 转换指定单元格区域到图片知识扩展C# 将 Excel

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

SQL表间关联查询实例详解

《SQL表间关联查询实例详解》本文主要讲解SQL语句中常用的表间关联查询方式,包括:左连接(leftjoin)、右连接(rightjoin)、全连接(fulljoin)、内连接(innerjoin)、... 目录简介样例准备左外连接右外连接全外连接内连接交叉连接自然连接简介本文主要讲解SQL语句中常用的表

shell编程之函数与数组的使用详解

《shell编程之函数与数组的使用详解》:本文主要介绍shell编程之函数与数组的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录shell函数函数的用法俩个数求和系统资源监控并报警函数函数变量的作用范围函数的参数递归函数shell数组获取数组的长度读取某下的