JavaScript表格头部拉伸

最新推荐文章于 2023-08-14 03:33:14 发布

原创最新推荐文章于 2023-08-14 03:33:14 发布 · 396 阅读

0 ·

CC 4.0 BY-SA版权

Web前端同时被 2 个专栏收录

85 篇文章

订阅专栏

CSS

5 篇文章

订阅专栏

本文介绍如何使用JavaScript来实现表格的头部拉伸功能，允许用户通过拖动表格列头来自定义列宽，提高数据查看体验。内容涵盖事件监听、鼠标交互处理和DOM操作等关键技术点。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#carTable{width:100%;}
		td{text-align:center;}
	</style>
</head>
<body>
	<table id="carTable" border="1" cellspacing="0" cellpadding="0">
		<thead>
			<tr>
				<th>header</th>
				<th>header</th>
				<th>header</th>
				<th>header</th>
				<th>header</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>data</td>
				<td>data</td>
				<td>data</td>
				<td>data</td>
				<td>data</td>
			</tr>
		</tbody>
	</table>
	<script>
		var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
		var table = document.getElementById("carTable");
		for (j = 0; j < table.rows[0].cells.length; j++) {
		    table.rows[0].cells[j].onmousedown = function() {
		        //记录单元格
		        tTD = this;
		        if (event.offsetX > tTD.offsetWidth - 10) {
		            tTD.mouseDown = true;
		            tTD.oldX = event.x;
		            tTD.oldWidth = tTD.offsetWidth;
		        }
		        //记录Table宽度
		        //table = tTD; while (table.tagName != ‘TABLE') table = table.parentElement;
		        //tTD.tableWidth = table.offsetWidth;
		    };
		    table.rows[0].cells[j].onmouseup = function() {
		        //结束宽度调整
		        if (tTD == undefined) tTD = this;
		        tTD.mouseDown = false;
		        tTD.style.cursor = 'default';
		    };
		    table.rows[0].cells[j].onmousemove = function() {
		        //更改鼠标样式
		        if (event.offsetX > this.offsetWidth - 10)
		            this.style.cursor = 'col-resize';
		        else
		            this.style.cursor = 'default';
		        //取出暂存的Table Cell
		        if (tTD == undefined) tTD = this;
		        //调整宽度
		        if (tTD.mouseDown != null && tTD.mouseDown == true) {
		            tTD.style.cursor = 'default';
		            if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
		                tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
		            //调整列宽
		            tTD.style.width = tTD.width;
		            tTD.style.cursor = 'col-resize';
		            //调整该列中的每个Cell
		            table = tTD;
		            while (table.tagName != 'TABLE') table = table.parentElement;
		            for (j = 0; j < table.rows.length; j++) {
		                table.rows[j].cells[tTD.cellIndex].width = tTD.width;
		            }
		            //调整整个表
		            //table.width = tTD.tableWidth + (tTD.offsetWidth – tTD.oldWidth);
		            //table.style.width = table.width;
		        }
		    };
		}
	</script>
</body>
</html>