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) no-repeat;}
.splitx{overflow:hidden;position:absolute;height:3px;cursor:row-resize;background: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 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 ソリッド #000;border-bottom:1px ソリッド #000;height:25px;}

HTML:

复制代码代码如下:

    

表格标题

    
        
            
        
        
            
            
            
            
            
            
        
        
            
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
        
        
            
            
            
            
            
        
        
            
            
            
            
        
        
            
            
            
 



 


 
 


 
 


 
 

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

JS:

复制代码代码如下:

//注: オブジェクトを取得します。 例: $("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; do { if (parentNode && ノード == 親ノード) { ブレーク; } x = ノード .offsetLeft; ); ノード = _node; return { 'x': x, 'y': y }; }
function addEvent(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' イベント関数](window.event) }; object.attachEvent('on' イベント, 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.relationTarget : e.type == 'mouseout' ? e.toElement : e.fromElement; while (reltg && reltg ! = ハンドラー) reltg = reltg.parentNode; return (reltg != ハンドラー); }

var table = $("mainTable"); 🎜> var tabEditDiv; //テーブルをカバーする DIV
var cellHide = [];//補助行スパン、セルスパン グリッド
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 = "<入力タイプ='text' value='" (this.innerHTML == "テーブルタイトル" ? "" : 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.this; if (key == 13) this.blur(); };

関数loadTable(){
var tabPos = absPos(table);
if(!tabEditDiv){
tabEditDiv = document.createElement("div");
document.body.appendChild(tabEditDiv); " 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";
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(){
varindex = 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(!$("spility_" pos.x)){
var split = document.createElement("d iv") ;
split.id = "split_" pos.x;
split.className = "split";
split.style.cssText = "height:" "ピクセル;上:15ピクセル;左:" (pos.x - 2 15) "px";
split.onmousedown = function(){
varindex = this.getAttribute("index");
if(index == null) { インデックス = 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");
}
}
}

functionloadHide(){
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 = [];
 });