js를 사용하여 표 셀 높이 및 너비 조정, 병합된 셀과 호환(IE6, 7, 8, FF와 호환)

先上效果图：

CSS:

复제대码 代码如下:

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

.tabEditDiv{위치:절대;너비:15px;높이:15px;커서:포인터;}
.seltab{위치:절대;폭:15px;높이:15px;커서:포인터;배경:url(이미지 /seltab.gif) 반복 없음;}
.splitx{overflow:hidden;위치:absolute;height:3px;cursor:row-resize;배경:red !important;filter:Alpha(opacity=10);- moz-불투명도:0.1;불투명도: 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 입력{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:

复aze代码 代码如下:

//참고: 객체를 가져옵니다. 예: $("objectId")는 document.getElementById("objectId")
if (typeof $ != "function") { var $ = function ( ids) { return document.getElementById(ids) }; }
//참고: parentNode의 마지막 노드인 좌표를 가져옵니다. 예: 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.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] = object[event func] = function () { object['e' event func](window.event) }; object.attachEvent('on' event, object[event func]) } /*두 가지 메소드를 모두 사용할 수 없으면 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.관련Target ? e.type == 'mouseout' ? e.toElement : e.fromElement; while (reltg && reltg ! = 핸들러) reltg = reltg.parentNode; return (reltg != 핸들러) }

var table = $("mainTable");
var tabEditDiv; //테이블을 덮는 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] ;
var _this = this;
input.focus();
input.onblur = function(){_this.innerHTML = this.value;}
input.onkeydown = function(e) { var key = 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";

//모든 테이블 버튼 선택
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";
이 .style.height = "15px ";
                                else{
                table.setAttribute("selected","1");
                table.style.Background = "#B6CAEB";
               this.style.width = (table.clientWidth 15) "px" >
     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 = "너비:" table.clientWidth "px;left:15px;top:" (pos.y table.rows[i].cells[j].clientHeight - 1 15) "px";
                분할.onmousedown = function(){
                    var index = this.getAttribute("index");
                    if(index == null){ index = 0; var divs = tabEditDiv.getElementsByTagName("div"); var left = parsInt(this.id.split("_")[1]); for(var k=0;k                    moveMode = "cellHeight";
                    moveArgs[moveArgs.length] = index;
                 }
                 tabEditDiv.appendChild(split);
             }
             if(j > 0){ //加载可调整宽島的div
               if(!$("split_" pos.x)){
                    var 분할 = 문서. createElement("div") ;
                   분할.id = "sply_" pos.x;
                  분할.className = "sply";
                  분할.style.cssText = "높이:" 높이 "px;상단:15px;왼쪽 :" (pos.x - 2 15) "px";
                    Split.onmousedown = function(){
                     var index = this.getAttribute("index");
                        if(색인 == null) { 인덱스 = 0; var divs = tabEditDiv.getElementsByTagName("div"); var left = parsInt(this.id.split("_")[1]); for(var k=0;k                       moveMode = "cellWidth";
                      moveArgs[moveArgs.length] = index;
                     }
>    loadHide();
             }
             table.rows[i].cells[j]. onmousedown = function(){
                //alert("x");
             }
        }
     }
 }

함수 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&&temp숨기기 [l][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 1){계속 ;}
             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){계속;}
             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 = [];
 });