突破编程_前端_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

相关文章

Go语言数据库编程GORM 的基本使用详解

《Go语言数据库编程GORM的基本使用详解》GORM是Go语言流行的ORM框架,封装database/sql,支持自动迁移、关联、事务等,提供CRUD、条件查询、钩子函数、日志等功能,简化数据库操作... 目录一、安装与初始化1. 安装 GORM 及数据库驱动2. 建立数据库连接二、定义模型结构体三、自动迁

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

MySQL数据库的内嵌函数和联合查询实例代码

《MySQL数据库的内嵌函数和联合查询实例代码》联合查询是一种将多个查询结果组合在一起的方法,通常使用UNION、UNIONALL、INTERSECT和EXCEPT关键字,下面:本文主要介绍MyS... 目录一.数据库的内嵌函数1.1聚合函数COUNT([DISTINCT] expr)SUM([DISTIN

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled