Use js to adjust table cell height and width, compatible with merged cells (compatible with IE6, 7, 8, FF) examples_javascript skills

先上效果图：

CSS:

复制代码 代码如下:

body{margin:0px;padding:0px;-moz-user-select:none;cursor:default;}

.tabEditDiv{position:absolute;width:15px;height:15px;cursor:pointer;}
.seltab{position:absolute;width:15px;height:15px;cursor:pointer;background:url(images/seltab.gif) no-repeat;}
.splitx{overflow:hidden;position:absolute;height:3px;cursor:row-resize;background:red !important;filter:Alpha(opacity=10);-moz-opacity:0.1;opacity: 0.1; }
.splity{overflow:hidden;position:absolute;width:3px;cursor:col-resize;background:red !important;filter:Alpha(opacity=10);-moz-opacity:0.1;opacity: 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 input{width:100%;border:0px;height:28px;line-height:30px;text-align:center;font-weight:bold;font-size:18px;font-family:宋体;}
.finelinetable{border-right:1px solid #000;border-top:1px solid #000;border-collapse:collapse;font-size:13px;width:800px;margin:0 auto;}
.finelinetable td{border-left:1px solid #000;border-bottom:1px solid #000;height:25px;}

HTML:

复制代码 代码如下:

    

表格标题

    
        
            
        
        
            
            
            
            
            
            
        
        
            
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
        
        
            
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
            
        
        
            
            
        
        
            
            
        
        
            
            
        
        
            
            
        
    

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

 

JS:

复制代码 代码如下:

//Note: Get the object. Example: $("objectId") is equivalent to document.getElementById("objectId")
if (typeof $ != "function") { var $ = function ( ids) { return document.getElementById(ids) }; }
//Note: Get the coordinates, the last node of parentNode. Example: absPos(object).x
function absPos(_node, parentNode) { var x = y = 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 method (DOM method) The meaning of false in the following statement is It is used in the bubbling phase. If it is true, it is used in the capturing phase (IE does not support capturing), so false is used here for the purpose of unification. */object.addEventListener(event, func, false); return true; } else if (object.attachEvent) { /* MSIE method (IE method) */object['e' event func] = func; object[event func] = function () { object['e' event func](window. event); }; object.attachEvent('on' event, object[event func]); return true; } /*If neither method is available, return false */return false; }
//Comments: Determine whether onmouseover and onmouseout are triggered by child nodes within the object. Example: 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; //DIV covering the table
var cellHide = [];//Supplementary rowspan, cellspan grid
var moveMode = "";//Mouse movement mode
var moveArgs = []; //Move mode parameters

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];
var _this = this;
input.focus();
input.onblur = function(){_this.innerHTML = this.value;}
input.onkeydown = function (e) { var key = window.event ? window.event. keyCode : e.which; if (key == 13) this.blur(); };
}

function loadTable(){
var tabPos = absPos(table);
if(!tabEditDiv){
      tabEditDiv = document.createElement("div");   
    document.body.appendChild(tabEditDiv); tabPos.x - 15) "px;top:" (tabPos.y - 15) "px;";
tabEditDiv.className = "tabEditDiv";

//Select all Table button
if(!seltab){
var seltab = document.createElement("div");
seltab.style.cssText = "width:15px;height:15px;left:" (tabPos.x - 15) " px;top:" (tabPos.y - 15) "px;";
seltab.className = "seltab";
seltab.onclick = function(){
if(table.getAttribute("selected ") == "1"){
table.removeAttribute("selected");
table.style.background = "";
this.style.width = "15px";
This .style.height = "15px";
                                 else{
                 table.setAttribute("selected","1");
                 table.style.background = "#B6CAEB";
                 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);
     tabEditDiv.innerHTML = "";
     var cellcount = 0;
     var isadd = cellHide.length == 0;
     for(var i=0;i         for(var j=0;j             var pos = absPos(table.rows[i].cells[j],table);
             if(!$("splitx_" (pos.y table.rows[i].cells[j].clientHeight))){ //加载可调整高度的div
                 var split = document.createElement("div");
                 split.id = "splitx_" (pos.y table.rows[i].cells[j].clientHeight);
                 split.className = "splitx";
                 split.style.cssText = "width:" table.clientWidth "px;left:15px;top:" (pos.y table.rows[i].cells[j].clientHeight - 1 15) "px";
                 split.onmousedown = function(){
                     var index = this.getAttribute("index");
                     if(index == null){ index = 0; var divs = tabEditDiv.getElementsByTagName("div"); var left = parseInt(this.id.split("_")[1]); for(var k=0;k                     moveMode = "cellHeight";
                     moveArgs[moveArgs.length] = index;
                 }
                 tabEditDiv.appendChild(split);
             }
             if(j > 0){ //加载可调整宽度的div
                 if(!$("splity_" pos.x)){
                     var split = document.createElement("div");
                     split.id = "splity_" pos.x;
                     split.className = "splity";
                     split.style.cssText = "height:" table.clientHeight "px;top:15px;left:" (pos.x - 2 15) "px";
                     split.onmousedown = function(){
                         var index = this.getAttribute("index");
                         if(index == null){ index = 0; var divs = tabEditDiv.getElementsByTagName("div"); var left = parseInt(this.id.split("_")[1]); for(var k=0;k                         moveMode = "cellWidth";
                         moveArgs[moveArgs.length] = index;
                     }
                     tabEditDiv.appendChild(split);
                 }
             }
             if(isadd){
                 loadHide();
             }
             table.rows[i].cells[j].onmousedown = function(){
                 //alert("x");
             }
         }
     }
 }

 function loadHide(){
     cellHide = [];
     var tempHide = [];
     for(var i=0;i         for(var j=0;j             for(var k=1;k                 cellHide[cellHide.length] = [i k,j];
                 tempHide[tempHide.length] = [i k,j];
             }
         }
     }
     for(var i=0;i         for(var j=0;j             for(var k=1;k                 var yc = 0;
                 for(var l=0;l                     if(tempHide[l][0]==i&&tempHide[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,j k yc];
             }
         }
     }
 }

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

         var temp = moveArgs[0];
         var test = "";
         for(var i=0;i             var index = temp;
             for(var j=0;j                 if(i==cellHide[j][0] && temp>=cellHide[j][1]){index--;}
             }
             if(!table.rows[i].cells[index] || index < 0 || table.rows[i].cells[index].colSpan > 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"){ //调整高度
         var index = moveArgs[0];
         for(var i=0;i             if(table.rows[index].cells[i].rowSpan > 1){continue;}
             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 || event;
     if (!isMouseLeaveOrEnter(e, this)) { return; }
     moveMode = ""; moveArgs = [];
 });