jQuery實現(xiàn)拖動調(diào)整表格單元格大小的代碼實例
jQuery實現(xiàn)的拖動調(diào)整表格td單元格的大小:
在實際應(yīng)用中,可能有這樣的需求,那就是需要調(diào)整td單元格的大小。
也許是為了便于觀察,也許是其他原因,反正這樣的需求是有的,下面就分享一段能夠?qū)崿F(xiàn)此功能的代碼。
代碼實例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>腳本之家</title>
<style type="text/css" >
table {
border-collapse: collapse;
}
td {
text-align: center;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
(function ($){
$.fn.tableresize = function () {
var _document = $("body");
$(this).each(function () {
if (!$.tableresize) {
$.tableresize = {};
}
var _table = $(this);
//設(shè)定ID
var id = _table.attr("id") || "tableresize_" + (Math.random() * 100000).toFixed(0).toString();
var tr = _table.find("tr").first(), ths = tr.children(), _firstth = ths.first();
//設(shè)定臨時變量存放對象
var cobjs = $.tableresize[id] = {};
cobjs._currentObj = null, cobjs._currentLeft = null;
ths.mousemove(function (e) {
var _this = $(this);
var left = _this.offset().left,
top = _this.offset().top,
width = _this.width(),
height = _this.height(),
right = left + width,
bottom = top + height,
clientX = e.clientX,
clientY = e.clientY;
var leftside = !_firstth.is(_this) && Math.abs(left - clientX) <= 5,
rightside = Math.abs(right - clientX) <= 5;
if (cobjs._currentLeft||clientY>top&&clientY<bottom&&(leftside||rightside)){
_document.css("cursor", "e-resize");
if (!cobjs._currentLeft) {
if (leftside) {
cobjs._currentObj = _this.prev();
}
else {
cobjs._currentObj = _this;
}
}
}
else {
cobjs._currentObj = null;
}
});
ths.mouseout(function (e) {
if (!cobjs._currentLeft) {
cobjs._currentObj = null;
_document.css("cursor", "auto");
}
});
_document.mousedown(function (e) {
if (cobjs._currentObj) {
cobjs._currentLeft = e.clientX;
}
else {
cobjs._currentLeft = null;
}
});
_document.mouseup(function (e) {
if (cobjs._currentLeft) {
cobjs._currentObj.width(cobjs._currentObj.width() + (e.clientX - cobjs._currentLeft));
}
cobjs._currentObj = null;
cobjs._currentLeft = null;
_document.css("cursor", "auto");
});
});
};
})(jQuery);
$(document).ready(function () {
$("table").tableresize();
});
</script>
</head>
<body>
<table cellspacing="0" border="1" rules="all">
<tbody>
<tr>
<td style="width:200px;">ID</td>
<td style="width:200px;">名字</td>
<td style="width:200px;">年紀(jì)</td>
<td style="width:200px;">地址</td>
<td style="width:200px;">電話</td>
</tr>
<tr>
<td>22</td>
<td>Name:44</td>
<td>Age:23</td>
<td>Address:47</td>
<td>Phone:15</td>
</tr>
<tr>
<td>28</td>
<td>Name:42</td>
<td>Age:68</td>
<td>Address:30</td>
<td>Phone:50</td>
</tr>
<tr>
<td>29</td>
<td>Name:63</td>
<td>Age:48</td>
<td>Address:90</td>
<td>Phone:76</td>
</tr>
</tbody>
</table>
</body>
</html>
相關(guān)文章
jQuery插件FusionCharts實現(xiàn)的Marimekko圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實現(xiàn)的Marimekko圖效果,結(jié)合實例形式分析了jQuery使用FusionCharts插件結(jié)合xml數(shù)據(jù)繪制Marimekko圖的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03基于jquery的自定義鼠標(biāo)提示效果 jquery.toolTip
看到其它網(wǎng)站A標(biāo)簽title效果,心里癢癢,就想也用到自己網(wǎng)站上。 正好在學(xué)jquery 插件擴(kuò)展,就參照前輩代碼,自己動手寫了一個2010-11-11jQuery插件zTree實現(xiàn)獲取當(dāng)前選中節(jié)點在同級節(jié)點中序號的方法
這篇文章主要介紹了jQuery插件zTree實現(xiàn)獲取當(dāng)前選中節(jié)點在同級節(jié)點中序號的方法,結(jié)合實例形式分析了屬性插件zTree針對節(jié)點序號的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03使用jQuery中的wrap()函數(shù)操作HTML元素的教程
wrap(),顧名思義,就是包裹的意思,就是在你所在器外層包裹一層?xùn)|西,接下來我們就詳細(xì)來看使用jQuery中的wrap()函數(shù)操作HTML元素的教程:2016-05-05jQuery通過寫入cookie實現(xiàn)更換網(wǎng)頁背景的方法
這篇文章主要介紹了jQuery通過寫入cookie實現(xiàn)更換網(wǎng)頁背景的方法,涉及jQuery結(jié)合cookie設(shè)置頁面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2016-04-04jquery焦點圖片切換(數(shù)字標(biāo)注/手動/自動播放/橫向滾動)
焦點圖片切換在網(wǎng)頁制作的商品展示中經(jīng)常會用到,這樣的效果可以給用戶帶來耳目一新的感覺同時也是用戶比較追捧的,本文也實現(xiàn)了一個這樣的焦點圖片切換效果,感興趣的你可以參考下啊,希望本文對你有所幫助2013-01-01