标签：
jquery实现的拖动可以调整table单元格大小代码实例:
本章节介绍一下如果利用jquery实现表格单元格可以通过鼠标拖动调整大小的效果，当然如果让我们完全写代码的话，可能会比较的复杂，不过有现成的插件可以使用，只要简单的几个步骤就可以实现我们的要求。
一.引入相关库文件:
要使用相关插件，那就必须要引入相关的代码文件，如下:
<script src="/js/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="/js/store.js" type="text/javascript"></script> <script src="/js/jquery.resizableColumns.js" type="text/javascript"></script>
上面的插件这里就不提供下载了，在网上有很多，自行搜索即可。
二.table表格简单代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
.table{
width:300px;
height:100px;
border:1px solid #ccc;
border-collapse:collapse;
}
.table td,.table th {
border:1px solid #ccc;
padding:5px;
}
</style>
</head>
<body>
<table id="thetable" class="table">
<thead>
<tr>
<th data-resizable-column-id="a">蚂蚁部落一</th>
<th data-resizable-column-id="b">蚂蚁部落二</th>
</tr>
</thead>
<tr>
<td>javascript教程</td>
<td>jQuery教程</td>
</tr>
<tr>
<td>HTML教程</td>
<td>div css教程</td>
</tr>
</table>
</body>
</html>
以上代码就是我们想要拖动的表格代码。
三.如何使用:
$(function(){
$("#thetable").resizableColumns({
store: window.store
});
})
使用如上代码就可以实现拖动效果了。
实现此效果非常的简单，只要按部就班的按照上面的方式即可。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14056
标签：
原文地址：http://my.oschina.net/u/1468670/blog/502729
