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