display：table標籤來自動改變列寬 改變的同時table的總體寬度跟隨變化

發現公司裏的全部分頁功能都是經過display：talbe來實現的，可是用戶最近說要讓表格列寬能夠拖動；全部我就尋找了好多的辦法；網上找了不少的資料，可是都不是我要的效果由於他們都是列寬不改變要不就是我看不懂！

我模仿網上的核心代碼來本身寫了一個；由於咱們知道display：table標籤最後再頁面展現的仍是table表格因此我就在頁面的最後面來更改table的樣式：

思路：

1，捕獲鼠標移動到表格豎線上時候改變鼠標樣式：

2.   在改變樣式的區域裏，按下鼠標就會生成輔助線來拖動；同時設置單元格最小寬度爲8px

3.  改變表頭單元格寬度，改變表格寬度

素材下載： http://download.csdn.net/detail/ydcun/5915563

我作了一個用Myeclipse開發的index.jsp頁面： 工程源碼下載

function TableAuto(divId){
	var cellIndex=-1;	//記錄所做用的列索引
	var preWidth=0;		//記錄列的原寬
	var preX=0;			//記錄鼠標的原屏幕x座標
	var preLeft=0;		//記錄輔助線的初始位置
  	var currentTitleCell=null; //當前改變列寬的列的標題單元格
	var doTitleCellClick=null; //用於暫存標題行click響應行數
	var table = null;//表格對象
	var titleCells = null;//獲取標題行
	
	//輔助線對象
	var scale = document.createElement("div");
	scale.style.cssText="border-left:dotted 1px #000;z-index:101;position:absolute;left:-1;width:0;";
	document.body.appendChild(scale);
	
	
    //函數：計算元素的絕對位置
	function getAbsPos(e){
		var rect = e.getBoundingClientRect()
		var body = document.body;
		return { left:rect.left+body.scrollLeft,top:(rect.top+body.scrollTop) };
	}
    
	//函數：改變列寬 (響應輔助線的 onmousemove 事件)
	function changeColWidth(){
		var evt = arguments.length==0 ? event : arguments[0];
		var newX = evt.screenX;
		var newWidth = preWidth+newX-preX;
		if(newWidth<8) newWidth=8;
		else scale.style.left=preLeft+newX-preX;
	}
	//函數：改變列寬 (響應輔助線 onmouseup 事件)
	function changeColWidthStop(){		
		scale.releaseCapture();
		scale.onmousemove = null;
		scale.onmouseup = null;
		scale.style.left=-1;
		var evt = arguments.length==0 ? event : arguments[0];
		var newX = evt.screenX;//鼠標如今座標
		var mLong = newX-preX;//鼠標移動距離
		var tdNewWidth = mLong+preWidth;//調整後單元格寬度
		if(tdNewWidth<8) tdNewWidth=8;
		var tableNewWidth=eval($('#'+divId).width()-preWidth+tdNewWidth);//表格寬度=原始寬度表格寬度-單元格原始寬度+單元格如今寬度
		var trs = table.getElementsByTagName("tr");
		$('#'+divId).width(tableNewWidth);//調整表格寬度
		//for ( var j = 0; j < trs.length; j++) {//調整列寬
               trs[0].cells[cellIndex].width =tdNewWidth;
        //}
		
		
		
	}
    //函數：改變列寬 (響應標題行單元格的 onmousedown 事件)
	function doMouseDown(){
		var evt = arguments.length==0 ? event : arguments[0];
		preX = evt.screenX;
		var pos = getAbsPos(this);
		preLeft = pos.left+this.offsetWidth;
		scale.style.left=preLeft-2;
		scale.style.top = pos.top-2;
		scale.style.height=table.offsetHeight-4;
		
		scale.setCapture();
		scale.onmousemove = changeColWidth;
		scale.onmouseup = changeColWidthStop;
		cellIndex = this.cellIndex;
		preWidth = this.offsetWidth;

	}
    //函數：響應標題單元格 mousemove 事件
	function doTitleCellMousemove(){
		var evt = arguments.length==0 ? event : arguments[0];
		if(this.offsetWidth-evt.offsetX<10){//單元格的寬-鼠標在單元格的水平座標
			this.style.cursor="col-resize";
			this.onmousedown=doMouseDown;
		}else{
			this.style.cursor="";
			this.onmousedown=null;
		}
	}
    //添加控制元素的代碼
    function applyCtrl(tableId){
    	table = document.getElementById(tableId);//獲取表格
    	table.getElementsByTagName("tr")[0].className="scrollColThead";
    	//獲取標題行
    	titleCells = table.getElementsByTagName("tr")[0].cells;
    	//給每一個標題行單元格綁頂 onmousemoce 事件處理函數
		for(var i=1;i<titleCells.length;i++){
			titleCells[i].onmousemove=doTitleCellMousemove;
		}
    }
    //此處爲表格添加控制元素。
    applyCtrl(divId);

}

有不清楚的很願意與你們交流：ydcun@163.com