本文介绍如何使用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后需刷新页面方可生效。