setTableTd_width.js 文件路徑找不到無法掩飾啊  回復(fù)  更多評(píng)論
  

@hong
/*****************************************************
* 說明：
* 這是js部分，可以把它存為一個(gè)js文件鏈到HTML文件中。
* js中還有一些BUG，希望大家可以幫我改一下。
* BUG現(xiàn)象是當(dāng)快速拖動(dòng)單元格時(shí)，會(huì)出現(xiàn)突然單元格變大的情況。
****************************************************/
var pre_currentTd_width = ""; // 空單元格的前一個(gè)格的寬度
var currentTd_width = ""; // 單元格的寬度
var downX; // 返回鼠標(biāo)按下時(shí)的X坐標(biāo)
var maxLength_col = 100; // 每個(gè)單元格的最大寬度

function $(id){
return document.getElementById(id);
}

//------------ 給單元格施加onmouseover事件 --------------
document.onmouseover = function(){
var element_td = event.srcElement; // 返回鼠標(biāo)放上時(shí)單元格的對(duì)象
if(event.srcElement.getAttribute("name") == "set"){
document.body.style.cursor = "e-resize";
pre_currentTd_width = element_td.previousSibling.offsetWidth; // 放上時(shí)返回單元格前一個(gè)單元格的相對(duì)寬度
currentTd_width = element_td.offsetWidth; // 放上時(shí)返回單元格的相對(duì)寬度
}
}

document.onmouseout = function(){
document.body.style.cursor = "";
document.onmousemove = "";
}

document.onselectstart = function(){
return false;
}

//------------ 鼠標(biāo)按下單元格時(shí)的變化 --------------
function td_onmousedown(){
var element_td = event.srcElement; // 返回鼠標(biāo)按下時(shí)單元格的對(duì)象
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; // 返回鼠標(biāo)移動(dòng)時(shí)單元格的對(duì)象
var preTd_width = event.clientX + pre_currentTd_width - downX; // 鼠標(biāo)移動(dòng)時(shí)，前一個(gè)單元格的實(shí)際寬度
var Td_width = currentTd_width - (preTd_width - pre_currentTd_width); // 鼠標(biāo)移動(dòng)時(shí)，單元格的實(shí)際寬度
var current_col_max; // 當(dāng)前單元格的前一個(gè)單元格處于最小寬度時(shí)，存放當(dāng)前單元格的最大寬度
var pre_col_max; // 當(dāng)前單元格的處于最小寬度時(shí)，存放前一個(gè)單元格的最大寬度

try{
if(element_td.getAttribute("name") == "set"){
$("inner").innerHTML = "clientX: " + event.clientX + "<br><br>downX: "+ downX +"<br><br>前一個(gè)單元格offsetWidth寬度: " + pre_currentTd_width + "<br><br>前一個(gè)單元格"+ element_td.previousSibling.id +"的實(shí)際寬度: " + (event.clientX + pre_currentTd_width - downX) +
"<br><br>當(dāng)前單元格"+ element_td.id +"的實(shí)際寬度: " + Math.abs(Td_width) + "<br><br>表格的寬度: " + $("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){ }
}
//--------------------- 程序部分結(jié)束 ----------------

/************************************************
* 說明：
* 以下部分是HTML部分，可以將上一個(gè)js文件鏈到文件中
***********************************************/  回復(fù)  更多評(píng)論
  

原文出處：http://blog.sina.com.cn/s/blog_4bf737b20100096f.html
這里有詳細(xì)的說明：
function $(id){
return document.getElementByIdx(id);
}
去掉X

  回復(fù)  更多評(píng)論