jQuery實(shí)現(xiàn)拖動(dòng)調(diào)整表格單元格大小的代碼實(shí)例
jQuery實(shí)現(xiàn)的拖動(dòng)調(diào)整表格td單元格的大小:
在實(shí)際應(yīng)用中,可能有這樣的需求,那就是需要調(diào)整td單元格的大小。
也許是為了便于觀察,也許是其他原因,反正這樣的需求是有的,下面就分享一段能夠?qū)崿F(xiàn)此功能的代碼。
代碼實(shí)例如下:
<!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è)定臨時(shí)變量存放對(duì)象
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遍歷函數(shù)siblings()用法實(shí)例
這篇文章主要介紹了jquery遍歷函數(shù)siblings()用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jquery的siblings函數(shù)用于元素遍歷的相關(guān)技巧,需要的朋友可以參考下2015-12-12jQuery插件FusionCharts實(shí)現(xiàn)的Marimekko圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的Marimekko圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts插件結(jié)合x(chóng)ml數(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ò)展,就參照前輩代碼,自己動(dòng)手寫(xiě)了一個(gè)2010-11-11jQuery插件zTree實(shí)現(xiàn)獲取當(dāng)前選中節(jié)點(diǎn)在同級(jí)節(jié)點(diǎn)中序號(hào)的方法
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)獲取當(dāng)前選中節(jié)點(diǎn)在同級(jí)節(jié)點(diǎn)中序號(hào)的方法,結(jié)合實(shí)例形式分析了屬性插件zTree針對(duì)節(jié)點(diǎn)序號(hào)的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03JQuery 實(shí)現(xiàn)的頁(yè)面滾動(dòng)時(shí)浮動(dòng)窗口控件
JQuery 實(shí)現(xiàn)的頁(yè)面滾動(dòng)時(shí)浮動(dòng)窗口控件實(shí)現(xiàn)代碼,大家可以參考下。2009-07-07使用jQuery中的wrap()函數(shù)操作HTML元素的教程
wrap(),顧名思義,就是包裹的意思,就是在你所在器外層包裹一層?xùn)|西,接下來(lái)我們就詳細(xì)來(lái)看使用jQuery中的wrap()函數(shù)操作HTML元素的教程:2016-05-05jQuery通過(guò)寫(xiě)入cookie實(shí)現(xiàn)更換網(wǎng)頁(yè)背景的方法
這篇文章主要介紹了jQuery通過(guò)寫(xiě)入cookie實(shí)現(xiàn)更換網(wǎng)頁(yè)背景的方法,涉及jQuery結(jié)合cookie設(shè)置頁(yè)面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2016-04-04Jquery submit()無(wú)法提交問(wèn)題
代碼點(diǎn)擊注冊(cè)按鈕時(shí)無(wú)法提交表單,名稱(chēng)沖突可能會(huì)導(dǎo)致混亂的失敗,接下來(lái)為大家介紹下解決方法,感興趣的朋友可以了解下2013-04-04jquery焦點(diǎn)圖片切換(數(shù)字標(biāo)注/手動(dòng)/自動(dòng)播放/橫向滾動(dòng))
焦點(diǎn)圖片切換在網(wǎng)頁(yè)制作的商品展示中經(jīng)常會(huì)用到,這樣的效果可以給用戶帶來(lái)耳目一新的感覺(jué)同時(shí)也是用戶比較追捧的,本文也實(shí)現(xiàn)了一個(gè)這樣的焦點(diǎn)圖片切換效果,感興趣的你可以參考下啊,希望本文對(duì)你有所幫助2013-01-01