用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例

　　先上效果图：

　　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:

复制代码代码如下:

　　<body>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　</table>

　　</body>

　　JS:

复制代码代码如下:

　　//注释:获取对象.示例:$("objectId") 等同于 document.getElementById("objectId")

　　if (typeof $ != "function") { var $ = function (ids) { return document.getElementById(ids) }; }

　　//注释:获取坐标,parentNode最后节点.示例:absPos(object).x

　　//注释:判断是否是对象内子节点触发的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 = "<input type='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.which; if (key == 13) this.blur(); };

　　}

　　function loadTable(){

　　var tabPos = absPos(table);

　　if(!tabEditDiv){

　　tabEditDiv = document.createElement("div");

　　document.body.appendChild(tabEditDiv);

　　}

　　tabEditDiv.style.cssText = "left:" + (tabPos.x - 15) + "px;top:" + (tabPos.y - 15) + "px;";

　　tabEditDiv.className = "tabEditDiv";

　　//全选Table按钮

　　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<table.rows.length;i++){

　　for(var j=0;j<table.rows[i].cells.length;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<divs.length;k++){ if(divs[k].id.indexOf("splitx_") < 0) continue; if(parseInt(divs[k].id.split("_")[1]) < left) index++; } this.setAttribute("index",index);}else{index = parseInt(index);}

　　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<divs.length;k++){ if(divs[k].id.indexOf("splity_") < 0) continue; if(parseInt(divs[k].id.split("_")[1]) < left) index++; } this.setAttribute("index",index);}else{index = parseInt(index);}

　　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<table.rows.length;i++){

　　for(var j=0;j<table.rows[i].cells.length;j++){

　　for(var k=1;k<table.rows[i].cells[j].rowSpan;k++){

　　cellHide[cellHide.length] = [i+k,j];

　　tempHide[tempHide.length] = [i+k,j];

　　}

　　for(var i=0;i<table.rows.length;i++){

　　for(var j=0;j<table.rows[i].cells.length;j++){

　　for(var k=1;k<table.rows[i].cells[j].colSpan;k++){

　　var yc = 0;

　　for(var l=0;l<tempHide.length;l++){

　　if(tempHide[l][0]==i&&tempHide[l][1]<j){yc++;}

　　}

　　for(var l=0;l<j;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<table.rows.length;i++){

　　var index = temp;

　　for(var j=0;j<cellHide.length;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<table.rows[index].cells.length;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 = [];

　　});

教程首页更多教程