JavaScript 实现表格列宽左右拖拽调整
作者:函数茶馆时间:2026-10-23 19:52:51浏览:325
本文介绍如何使用JavaScript实现表格列宽的左右拖拽调整功能。通过监听鼠标事件,动态计算并更新表格列的宽度,实现列宽的灵活收缩与扩展,提升用户体验。
表格列宽调整实现
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 左右收缩表格 </TITLE> <meta http-equiv="content-type" content="text/html;charset=gb2312"> </head> <body> <table> <tr> <td><img src="left.jpeg" /></td> <td> <table id="testTable"> <tr> <td>col1</td> <td>col2</td> <td>col3</td> <td>col4</td> <td>col5</td> <td>col6</td> <td>col7</td> <td>col8</td> <td>col9</td> <td>col10</td> </tr> </table> </td> <td><img src="right.jpeg" /></td> </tr> </table> </body> </html> 如需引入外部JS,请先全选内容(Ctrl+A),注意:引入外部JS后需刷新页面方可生效。
作者最新文章
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
JS使用constructor判断数据类型可靠吗
2026-11-05 13:49:41
