類似于桌面程序中的表格拖動表頭的效果，當鼠標停留在表頭邊框線上時，鼠標會變成表示左右拖動的形狀，接著拖動鼠標，會在表格中出現一條隨鼠標移動的豎線，最后放開鼠標，表格列寬會被調整。最近比較空閑，便自己動手嘗試實現，在此分享下小小的成果。
首先需要如圖所示的鼠標圖標文件，在自己的硬盤中搜索*.cur，肯定能找到。
為了能在所有需要該效果的頁面使用，并且不需要更改頁面任何HTML，我把所有的代碼整合在 $(document).ready(function() {}); 中，并寫入一個獨立的JS文件。
用一個1像素寬的DIV來模擬一條豎線，在頁面載入后添加到body元素中
$(document).ready(function() {$("body").append("<div id=/"line/" style=/"width:1px;height:200px;border-left:1px solid #00000000; position:absolute;display:none/" ></div> ");});接下來是鼠標移動到表格縱向邊框上鼠標變型的問題，起初我考慮在表頭中添加一個很小的塊級元素觸發mousemove 和mouseout事件，但為了簡單起見，我還是選擇為整個表頭添加該事件。
在TH的mousemove事件中處理鼠標變型：
$("th").bind("mousemove", function(event) {var th = $(this);//不給第一列和最后一列添加效果if (th.prevAll().length <= 1 || th.nextAll().length < 1) {return;}var left = th.offset().left;//距離表頭邊框線左右4像素才觸發效果if (event.clientX - left < 4 || (th.width() - (event.clientX - left)) < 4) {th.css({ 'cursor': '/web/Page/frameset/images/splith.cur' });//修改為你的鼠標圖標路徑}else {th.css({ 'cursor': 'default' });}});當鼠標按下時，顯示豎線，并設置它的高度，位置CSS屬性，同時記錄當前要改變列寬的TH對象，因為一條邊框線由兩個TH共享，這里總是取前一個TH對象。
$("th").bind("mousedown", function(event) {var th = $(this);//與mousemove函數中同樣的判斷if (th.prevAll().length < 1 | th.nextAll().length < 1) {return;}var pos = th.offset();if (event.clientX - pos.left < 4 || (th.width() - (event.clientX - pos.left)) < 4) {var height = th.parent().parent().height();var top = pos.top;$("#line").css({ "height": height, "top": top,"left":event .clientX,"display":"" });//全局變量，代表當前是否處于調整列寬狀態lineMove = true;//總是取前一個TH對象if (event.clientX - pos.left < th.width() / 2) {currTh = th.prev();}else {currTh = th;}}});接下來是鼠標移動時，豎線隨之移動的效果，因為需要當鼠標離開TH元素也要能有該效果，該效果寫在BODY元素的mousemove函數中
$("body").bind("mousemove", function(event) {if (lineMove == true) {$("#line").css({ "left": event.clientX }).show();}});最后是鼠標彈起時，最后的調整列寬效果。這里我給BODY 和TH兩個元素添加了同樣的mouseup代碼。我原先以為我只需要給BODY添加mouseup函數，但不明白為什么鼠標在TH中時，事件沒有觸發，我只好給TH元素也添加了代碼。水平有限，下面完全重復的代碼不知道怎么抽出來。
$("body").bind("mouseup", function(event) {if (lineMove == true) {$("#line").hide();lineMove = false;var pos = currTh.offset();var index = currTh.prevAll().length;currTh.width(event.clientX - pos.left);currTh.parent().parent().find("tr").each(function() {$(this).children().eq(index).width(event.clientX - pos.left);});}});$("th").bind("mouseup", function(event) {if (lineMove == true) {$("#line").hide();lineMove = false;var pos = currTh.offset();var index = currTh.prevAll().length;currTh.width(event.clientX - pos.left);currTh.parent().parent().find("tr").each(function() {$(this).children().eq(index).width(event.clientX - pos.left);});}});好了，只要在需要這個效果的頁面中引入包含以上代碼的JS文件，就可以為頁面中表格添加該效果。
另外以上代碼在火狐中自定義鼠標圖標的代碼沒出效果，所用的jquery為1.2.6
新聞熱點
疑難解答
