html可改变table宽度,可改变table宽度的JS效果

2012-01-28 09:27 | setTableTd_width.js

@hong

/*****************************************************

* 说明：

* 这是js部分，可以把它存为一个js文件链到HTML文件中。

* js中还有一些BUG，希望大家可以帮我改一下。

* BUG现象是当快速拖动单元格时，会出现突然单元格变大的情况。

****************************************************/

var pre_currentTd_width = ""; // 空单元格的前一个格的宽度

var currentTd_width = ""; // 单元格的宽度

var downX; // 返回鼠标按下时的X坐标

var maxLength_col = 100; // 每个单元格的最大宽度

function $(id){

return document.getElementById(id);

}

//------------ 给单元格施加onmouseover事件 --------------

document.onmouseover = function(){

var element_td = event.srcElement; // 返回鼠标放上时单元格的对象

if(event.srcElement.getAttribute("name") == "set"){

document.body.style.cursor = "e-resize";

pre_currentTd_width = element_td.previousSibling.offsetWidth; // 放上时返回单元格前一个单元格的相对宽度

currentTd_width = element_td.offsetWidth; // 放上时返回单元格的相对宽度

}

}

document.onmouseout = function(){

document.body.style.cursor = "";

document.onmousemove = "";

}

document.onselectstart = function(){

return false;

}

//------------ 鼠标按下单元格时的变化 --------------

function td_onmousedown(){

var element_td = event.srcElement; // 返回鼠标按下时单元格的对象

downX = event.clientX;

document.body.style.cursor = "e-resize";

if(document.body.style.cursor == "e-resize"){

document.onmousemove = td_onmousemove;

}

document.onmouseup = function(){

document.onmousemove = null;

document.body.style.cursor = "default"

}

}

function td_onmousemove(){

var element_td = event.srcElement; // 返回鼠标移动时单元格的对象

var preTd_width = event.clientX + pre_currentTd_width - downX; // 鼠标移动时，前一个单元格的实际宽度

var Td_width = currentTd_width - (preTd_width - pre_currentTd_width); // 鼠标移动时，单元格的实际宽度

var current_col_max; // 当前单元格的前一个单元格处于最小宽度时，存放当前单元格的最大宽度

var pre_col_max; // 当前单元格的处于最小宽度时，存放前一个单元格的最大宽度

try{

if(element_td.getAttribute("name") == "set"){

$("inner").innerHTML = "clientX: " + event.clientX + "
downX: "+ downX +"
前一个单元格offsetWidth宽度: " + pre_currentTd_width + "
前一个单元格"+ element_td.previousSibling.id +"的实际宽度: " + (event.clientX + pre_currentTd_width - downX) +

"
当前单元格"+ element_td.id +"的实际宽度: " + Math.abs(Td_width) + "
表格的宽度: " + $("oTable").offsetWidth;

if(preTd_width > maxLength_col && Td_width > maxLength_col && $("oTable").width == 900){

element_td.previousSibling.width = Math.abs(preTd_width) + "px";

element_td.width = Math.abs(Td_width) + "px";

//-------- 存放单元格的最大宽度 -------

current_col_max = Math.abs(Td_width);

pre_col_max = Math.abs(preTd_width);

}

else if(preTd_width < maxLength_col){ // 向左拖拽

element_td.previousSibling.width = maxLength_col + "px";

element_td.width = current_col_max + "px";

}

else if(Td_width < maxLength_col){ // 向右拖拽

element_td.previousSibling.width = pre_col_max + "px";

element_td.width = maxLength_col + "px";

document.onmousemove = "";

}

else if($("oTable").width > 900){

$("oTable").width = "900px";

}

}

}catch(e){ }

}

//--------------------- 程序部分结束 ----------------

/************************************************

* 说明：

* 以下部分是HTML部分，可以将上一个js文件链到文件中

***********************************************/  回复  更多评论