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后需刷新页面方可生效。

作者最新文章