现在的位置: 首页 -> 前端学习 -> JS前端 -> jquery可拖动表格调整列格子的宽度大小

jquery可拖动表格调整列格子的宽度大小

2014-06-01 21:15评论数 6 ⁄ 被浏览 26985 views+

最近在网上看到了一个jquery表格拖拽的插件,可以用鼠标控制,随意拖动表格边框,使其变大和缩小。感觉非常好用,于是整理了一下,分享给大家!喜欢网页特效的朋友可以收藏收藏,以后拿出来使用。


效果图:


js拖动表格边框


演示地址:https://www.daixiaorui.com/Public/demo/js/drag_tb/


实现源码:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery可拖动表格调整列格子的宽度大小</title>

</head>

<body>

<style type="text/css">

table{border-collapse:collapse;border-spacing:0;}

.listext th{background:#eee;color:#3366cc;}

.listext th,.listext td{border:solid 1px #ddd;text-align:left;padding:10px;font-size:14px;}

.rc-handle-container{position:relative;}

.rc-handle{position:absolute;width:7px;cursor:ew-resize;*cursor:pointer;margin-left:-3px;}

</style>

<table width="100%" class="listext">

  <tr>

    <th>www</th>

    <th>daixiaorui</th>

    <th>com</th>

  </tr>

  <tr>

    <td>欢迎</td>

    <td>您的</td>

    <td>访问</td>

  </tr>

  <tr>

    <td>欢迎</td>

    <td>您的</td>

    <td>访问</td>

  </tr>

</table>


<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.resizableColumns.js"></script>

<script type="text/javascript">

$(function(){

$("table").resizableColumns({});

});

</script>


</body>

</html>


最后说明一下,本实例没有提供下载,如果要正常运行使用,可以点击上面的“演示地址”进去,然后右键查看源文件,里面有js路径,把路径复制到浏览器下载下来就可以了。如果有任何问题,可以与代潇瑞博客交流。

 

文章出自:https://www.daixiaorui.com/read/98.html 本站所有文章,除注明出处外皆为原创,转载请注明本文地址,版权所有。

目前有 6 条评论  @我要评论

  1. 6楼凌风 : 2020-04-21 15:24:27 评论说: @回复

    拖动调整宽度失效,可以发一下源码吗?

    回复留言标识 Dai 回复 凌风: 可以了,访问 https://www.daixiaorui.com/Public/demo/js/drag_tb/ 刷新一下就行了。

    2020-04-23 00:16:13  @回复

  2. 5楼xing : 2018-09-28 17:25:38 评论说: @回复

    您好,你的链接失效了

  3. 4楼小琪琪 : 2018-01-30 16:19:17 评论说: @回复

    你好,演示的链接已经失效了,可不可以给我发一下源码啊?

    回复留言标识 Dai 回复 小琪琪: 不好意思,现在可以看到演示链接了。

    2018-02-04 12:09:49  @回复

    回复留言标识 小琪琪 回复 Dai: 谢谢

    2018-02-05 11:24:18  @回复

  4. 3楼11111111 : 2015-11-09 10:38:01 评论说: @回复

    parseInt($rightColumn[0].style.width) < $rightColumn.width() 这段代码对于不同浏览器来说 结果是不同的 可以拿google与firefox 对比。

  5. 2楼zhuce66ci : 2015-08-24 12:19:27 评论说: @回复

    发现这个插件在ie9下,会出现只能往右拖动,往左拖动很费劲,另外必须定义th,否则无效,我直接调用你的演示地址进行的查看。。。

  6. 1楼龙语 : 2014-10-29 17:39:05 评论说: @回复

    为何我直接演示 就可以 拷代码却不行 确定路径没问题

您的每一个评论都是对我的一份支持

 博客二维码

昵称 *

邮箱 *