jQuery實現(xiàn)鼠標可拖動調(diào)整表格列寬度
更新時間：2014年05月26日 09:38:55 作者：
這篇文章主要介紹了通過jQuery實現(xiàn)鼠標可拖動調(diào)整表格列寬度,需要的朋友可以參考下
實現(xiàn)鼠標可拖動調(diào)整表格列寬度 如圖：
一、引入文件：
<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
<table id="myTable" border="1">
<thead>
<tr>
<th data-resizable-column-id="a"><input type="checkbox" /></th>
<th data-resizable-column-id="b">欄目類型 </th>
<th data-resizable-column-id="c">活動名稱 </th>
<th data-resizable-column-id="d">狀態(tài) </th>
<th data-resizable-column-id="e">操作選項</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>青春日記</td>
<td>2014年度青春日記征文 </td>
<td>提交 </td>
<td>審核</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>我和孩子的成長故事</td>
<td>成長故事 </td>
<td>通過 </td>
<td>審核</td>
</tr>
</tbody>
</table>
以上html只是作為Demo 并不是我項目中所實際使用的，并且在測試的時候 也未能實現(xiàn)。郁悶...
三、實現(xiàn)表格可拖動
<script type="text/javascript">
$(function(){
$("#myTable").resizableColumns({
store: window.store
});
})
</script>
在項目使用過程中 發(fā)現(xiàn)無需引入store.js <th>也無需data-resizable-column-id屬性
并且$("#myTable").resizableColumns();也可實現(xiàn)功能
所需文件下載地址：http://xiazai.jb51.net/201405/yuanma/jquery-resizableColumns.zip
分別解壓兩個文件
jquery.resizableColumns.js在\jquery-resizable-columns-gh-pages\dist路徑下
store.js在store.js-master路徑下
一、引入文件：
復制代碼 代碼如下:
<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
復制代碼 代碼如下:
<table id="myTable" border="1">
<thead>
<tr>
<th data-resizable-column-id="a"><input type="checkbox" /></th>
<th data-resizable-column-id="b">欄目類型 </th>
<th data-resizable-column-id="c">活動名稱 </th>
<th data-resizable-column-id="d">狀態(tài) </th>
<th data-resizable-column-id="e">操作選項</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>青春日記</td>
<td>2014年度青春日記征文 </td>
<td>提交 </td>
<td>審核</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>我和孩子的成長故事</td>
<td>成長故事 </td>
<td>通過 </td>
<td>審核</td>
</tr>
</tbody>
</table>
以上html只是作為Demo 并不是我項目中所實際使用的，并且在測試的時候 也未能實現(xiàn)。郁悶...
三、實現(xiàn)表格可拖動
復制代碼 代碼如下:
<script type="text/javascript">
$(function(){
$("#myTable").resizableColumns({
store: window.store
});
})
</script>
在項目使用過程中 發(fā)現(xiàn)無需引入store.js <th>也無需data-resizable-column-id屬性
并且$("#myTable").resizableColumns();也可實現(xiàn)功能
所需文件下載地址：http://xiazai.jb51.net/201405/yuanma/jquery-resizableColumns.zip
分別解壓兩個文件
jquery.resizableColumns.js在\jquery-resizable-columns-gh-pages\dist路徑下
store.js在store.js-master路徑下
相關文章
jquery實現(xiàn)的動態(tài)回到頂部特效代碼
這篇文章主要介紹了jquery實現(xiàn)的動態(tài)回到頂部特效代碼,涉及jQuery基于時間函數(shù)的定時遞歸調(diào)用實現(xiàn)帶緩沖效果的移動功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了jquery實現(xiàn)左右滑動菜單效果代碼,涉及jquery鼠標事件及頁面元素動態(tài)變換的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
php結(jié)合imgareaselect實現(xiàn)圖片裁剪
這篇文章主要介紹了php結(jié)合imgareaselect實現(xiàn)圖片裁剪的相關資料,需要的朋友可以參考下2015-07-07
2009-05-05
本文給大家分享的是個人封裝的tab選項卡特效的插件，十分的簡單實用，附上用法和示例，有需要的小伙伴可以參考下。2015-06-06
jsTree(JQuery) 排序節(jié)點 Bug的解決方法。2011-07-07
讓jQuery與其他JavaScript庫并存避免沖突的方法
為了解決jQuery和其他JavaScript庫中$()函數(shù)的沖突，需要取消jQuery的$()函數(shù)，下面有個不錯的方法，感興趣的朋友可以參考下2013-12-12
jquery隊列queue與原生模仿其實現(xiàn)方法分享
jquery中的queue和dequeue是一組很有用的方法，他們對于一系列需要按次序運行的函數(shù)特別有用。特別animate動畫，ajax，以及timeout等需要一定時間的函數(shù)2014-03-03
解析prototype,JQuery中跳出each循環(huán)的方法
這篇文章主要介紹了在prototype,JQuery中跳出each循環(huán)的方法。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了jquery手風琴特效插件,效果非常棒，需要的朋友可以參考下2015-02-02