用js實作table單元格高寬調整,相容合併單元格(相容IE6、7、8、FF)實例_javascript技巧

先上效果圖：

CSS:

複製程式碼程式碼如下：

body{margin:0px; :0px;-moz-user-select:none;遊標:預設;}

.tabEditDiv{位置：絕對；寬度：15px；高度：15px；遊標：指標；}
.seltab{位置：絕對；寬度：15px；高度：15px；遊標：指標；背景：url（影像/seltab.gif) 不重複;}
.splitx{溢出:隱藏;位置:絕對;高度:3px;遊標:行調整大小;背景:紅色!重要;濾鏡:Alpha(不透明度=10); - moz-不透明度：0.1；不透明度：0.1； }
.spity{溢出：隱藏；位置：絕對；寬度：3px；遊標：col-resize；背景：紅色！重要；濾鏡：Alpha（不透明度= 10）；-moz-不透明度：0.1；不透明度：0.1 ;}
#tabletitle{font-weight:bold;font-size:18px;height:30px;width :800px;margin:0 auto;text-align:center;font-family:宋體;line-height:30px ;}
#tabletitle 輸入{寬度：100%；邊框：0px；高度：28px；行高： 30px；文字對齊：中心；字體粗細：粗體；字體大小：18px；字體系列：宋體;}
.finelinetable{border-right:1pxsolid #000;border-top:1pxsolid #000;border-collapse: collapse;font-size:13px;width:800px;margin:0 auto;}
.finelinetable td{邊框左：1px實心#000;邊框底部：1px實心#000;）：25px;}

HTML:

複製程式碼程式碼如下：

    

表格标题

    
        
            
        
        
            
            
            
            
            
            
        
        
            
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
        
        
            
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
             >


            
        
            
                

1
2	3	4			5	6	7
	8	9	10	11		12	13
	14	15			16	17	18
> > > > > td>

 



JS:




複製程式碼

程式碼如下：

//註解:取得物件.範例:$("objectId") 等同於document.getElementById("objectId")
 if (typeof $ != "function") { var $ = function ( ids) { return document。 = 0; var node = _node; do { if (parentNode && node == parentNode) { break; } x = node.offsetLeft; y = node.offsetTop; } while (node = node.offsetParent); node = _node; return { 'x': x, 'y': y }; }
 function addEvent(object, event, func) { if (object.addEventListener) { /* W3C方法（DOM方法）下面語句中的false意思是用於冒泡階段,若是true則是用於捕獲階段（IE不支援捕獲），所以這裡用false是一方面的原因是為了統一*/object.addEventListener(event, func, false); return true; } else if (object.attachEvent) { /* MSIE方法(IE方法) */object['e' event func] = func; object[event func] = function () { object['e' event func](window. event); }; object.attachEvent('on' event, object[event func]); return true; } /*如兩種方法都不具備則回傳false */return false; }
 //註解:判斷是否為物件內子節點觸發的onmouseover和onmouseout.範例:e = e || event;if (isMouseLeaveOrEnter(e, obj)) {}
 function isMouseLeaveOrEnter(e, handler) { if (e.type != 'mouseout' && e.type != 'mouseover') return false; var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement; while (reltg && reltg ! = handler) reltg = reltg.parentNode; return (reltg != handler); }

 var table = $("mainTable");
 var tabEditDiv; //覆蓋在table上的DIV
 var cellHide = [];//補充的rowspan,cellspan的格子
 var moveMode = "";//滑鼠移動模式
 var moveArgs = []; //移動模式參數

document.onselectstart = function(){return false;};
 addEvent(window,"resize",function(){loadTable();});

 $("tabletitle").ondblclick = function(){
     if(this.getElementsByTagName("input").length > 0){return;}
     this.innerHTML = "";
     var input = this.getElementsByTagName("input")[0];
   focus();
     input.onblur = function(){_this.innerHTML = this.value;}
     input.onkeydown = function (e) { var key = window.eventkey edow. .which; if (key == 13) this.blur(); };
 }

 function loadTable(){
     var tabPos = absPos(table);         tabEditDiv = document.createElement("div");
        EditDiv.style.cssText = "left:" (tabPos.x - 15) "px;top:" (tabPos.y - 15) "px;";
     tabEditDiv.className = "tabEditDiv";

   seltab){
         var seltab = document.createElement("div");
         seltab.style.cssText = "width:15pxtoppft :" (tabPos.y - 15) "px;";
         seltab.className = "seltab";
       table.getAttribute("selected") = = "1"){
                 table.removeAttribute("selected");
                 this.style.width = "15px";
             height = "15px";
             }else{
                 table.setAttribute("selected","1");
                     this.style.width = (table.clientWidth 15) "px" ;
                 this.style.height = (table.clientHeight 15) "px";
             document.body.appendChild(seltab);
     }
     loadTableEdit() ;
 } loadTable();

 function loadTableEdit(){ //載入可調整寬度及高度的div
     var tabPos = absPos(table);
; ;
     var cellcount = 0;
     var isadd = cellHide.length == 0;
     for(var i=0;i             var pos = absPos(table.rows[i]. "splitx_" (pos.y table.rows[i].cells[j].clientHeight))){ //載入高度調整的div
               split.id = "splitx_" (pos.y table.rows[i].cells[j].clientHeight);
                  split.style.cssText = "寬度:" table.clientWidth "px;left:15px;top:" (pos.y table.rows[i].cells[j].clientHeight - 1 15) "px";
         🎜>                     var index = this.getAttribute("index");
  = 0; } var divs = tabEditDiv.getElementsByTagName("div"); var left = parseInt(this.id.split("_")[1]); for(var k=0;k                         moveArgs[moveArgs.length] = index;
                 }
                 tabEditDiv.appendChild(split);
          
             if(j > 0){ //已調整寬度的div
                         var split = document.createElement("div") ;
                     split.id = "splity_" pos.x;
    >                     split.style.cssText = "高度：" table.clientHeight 「px；上：15px；左: " (pos.x - 2 15) "px";
                     split.onmousedown =     var index = this.getAttribute("index");
                      索引= 0; var divs = tabEditDiv.getElementsByTagName("div"); var left = parseInt(this.id.split("_")[1]); for(var k=0;k                                  moveArgs[moveArgs.length] = index;
                   tabEditDiv .appendChild(split);
                }
                           loadHide();
            function(){
                //alert("x");
         🎜> }

 函數loadHide(){
     儲存格隱藏= [];
     var tempHide = [];
     for(var i=0;i    . ) ].cells.length;j ){
             for(var k=1;k                 tempHide[tempHide.length] = [i k,j];     }
     for(var i=0;i         for(var j=0;j        [ j].colSpan;k ){
                 var yc = 0;
                          if(tempHide[l][0]== i&&temp隱藏[l][1] }
for(var l=0;l if(table.rows[i].cells[l].colSpan > 1){yc =table.rows [ i].cells[l].colSpan-1;}
}
cellHide[cellHide.length] = [i,jk yc];
}
}
}
}

addEvent(document,"mousemove",function(e){
e = e || window.event;
if(moveMode == "cellWidth"){ //调整宽度

var temp = moveArgs[0];
var test = "";
for(var i=0;i varindex = temp;
for(var j=0;j if(i==cellHide[j][0] && temp>=cellHide[j][1]){index-- ;}
}
if(!table.rows[i].cells[index] || インデックス 1){Continue ;}
if(e.clientX > absPos(table.rows[i].cells[index]).x)
table.rows[i].cells[index].style.width = e。 clientX - absPos(table.rows[i].cells[index]).x "px";
}
loadTableEdit();
}else if(moveMode == "cellHeight"){ //调整高
varindex = moveArgs[0];
for(var i=0;i if(table.rows[index] .cells[i].rowSpan > 1){続行;}
if(e.clientY > absPos(table.rows[index].cells[i]).y)
table.rows[index].cells[i].style。 height = e.clientY - absPos(table.rows[index].cells[i]).y "px";
}
loadTableEdit();
}
});
addEvent(document,"mouseup",function(e){
moveMode = ""; moveArgs = [];
});
addEvent(document,"mouseout",function(e){
e = e || イベント;
if (!isMouseLeaveOrEnter(e, this)) { return; }
moveArgs = [];
});