js实现table单元格高宽调整,兼容合并单元格
用js实现table单元格宽度和高度调整,有合并单元格也可以的.兼容IE6,7,8以及FF,附上代码css,html,js三部份
以下链接可以看到效果
http://www.cnblogs.com/tao8825529/archive/2012/05/15/2500992.html
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;}
1 <body> 2 <div id="tabletitle">表格标题</div> 3 <table id="mainTable" class="finelinetable"> 4 <tr> 5 <td colspan="8">1</td> 6 </tr> 7 <tr> 8 <td rowspan="3">2</td> 9 <td>3</td> 10 <td colspan="3">4</td> 11 <td>5</td> 12 <td>6</td> 13 <td>7</td> 14 </tr> 15 <tr> 16 <td>8</td> 17 <td>9</td> 18 <td>10</td> 19 <td colspan="2">11</td> 20 <td>12</td> 21 <td>13</td> 22 </tr> 23 <tr> 24 <td>14</td> 25 <td colspan="3">15</td> 26 <td>16</td> 27 <td>17</td> 28 <td>18</td> 29 </tr> 30 <tr> 31 <td colspan="8"> </td> 32 </tr> 33 <tr> 34 <td rowspan="3"> </td> 35 <td> </td> 36 <td colspan="2"> </td> 37 <td> </td> 38 <td colspan="3"> </td> 39 </tr> 40 <tr> 41 <td> </td> 42 <td colspan="2"> </td> 43 <td> </td> 44 <td colspan="3"> </td> 45 </tr> 46 <tr> 47 <td style="height: 25px"> </td> 48 <td colspan="2" style="height: 25px"> </td> 49 <td style="height: 25px"> </td> 50 <td colspan="3" style="height: 25px"> </td> 51 </tr> 52 <tr> 53 <td> </td> 54 <td colspan="7"> </td> 55 </tr> 56 <tr> 57 <td colspan="2"> </td> 58 <td colspan="6"> </td> 59 </tr> 60 <tr> 61 <td colspan="2"> </td> 62 <td colspan="6"> </td> 63 </tr> 64 <tr> 65 <td colspan="2"> </td> 66 <td colspan="6"> </td> 67 </tr> 68 </table> 69 </body>
1 //注释:获取对象.示例:$("objectId") 等同于 document.getElementById("objectId") 2 if (typeof $ != "function") { var $ = function (ids) { return document.getElementById(ids) }; } 3 //注释:获取坐标,parentNode最后节点.示例:absPos(object).x 4 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 }; } 5 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; } 6 //注释:判断是否是对象内子节点触发的onmouseover和onmouseout.示例:e = e || event;if (isMouseLeaveOrEnter(e, obj)) {} 7 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); } 8 9 var table = $("mainTable"); 10 var tabEditDiv; //覆盖在table上的DIV 11 var cellHide = [];//补充的rowspan,cellspan的格子 12 var moveMode = "";//鼠标移动模式 13 var moveArgs = []; //移动模式参数 14 15 document.onselectstart = function(){return false;}; 16 addEvent(window,"resize",function(){loadTable();}); 17 18 $("tabletitle").ondblclick = function(){ 19 if(this.getElementsByTagName("input").length > 0){return;} 20 this.innerHTML = "<input type='text' value='" + (this.innerHTML == "表格标题" ? "" : this.innerHTML) + "' />"; 21 var input = this.getElementsByTagName("input")[0]; 22 var _this = this; 23 input.focus(); 24 input.onblur = function(){_this.innerHTML = this.value;} 25 input.onkeydown = function (e) { var key = window.event ? window.event.keyCode : e.which; if (key == 13) this.blur(); }; 26 } 27 28 function loadTable(){ 29 var tabPos = absPos(table); 30 if(!tabEditDiv){ 31 tabEditDiv = document.createElement("div"); 32 document.body.appendChild(tabEditDiv); 33 } 34 tabEditDiv.style.cssText = "left:" + (tabPos.x - 15) + "px;top:" + (tabPos.y - 15) + "px;"; 35 tabEditDiv.className = "tabEditDiv"; 36 37 //全选Table按钮 38 if(!seltab){ 39 var seltab = document.createElement("div"); 40 seltab.style.cssText = "width:15px;height:15px;left:" + (tabPos.x - 15) + "px;top:" + (tabPos.y - 15) + "px;"; 41 seltab.className = "seltab"; 42 seltab.onclick = function(){ 43 if(table.getAttribute("selected") == "1"){ 44 table.removeAttribute("selected"); 45 table.style.background = ""; 46 this.style.width = "15px"; 47 this.style.height = "15px"; 48 }else{ 49 table.setAttribute("selected","1"); 50 table.style.background = "#B6CAEB"; 51 this.style.width = (table.clientWidth + 15) + "px"; 52 this.style.height = (table.clientHeight + 15) + "px"; 53 } 54 } 55 document.body.appendChild(seltab); 56 } 57 loadTableEdit(); 58 } loadTable(); 59 60 function loadTableEdit(){ //加载可调整宽度及高度的div 61 var tabPos = absPos(table); 62 tabEditDiv.innerHTML = ""; 63 var cellcount = 0; 64 var isadd = cellHide.length == 0; 65 for(var i=0;i<table.rows.length;i++){ 66 for(var j=0;j<table.rows[i].cells.length;j++){ 67 var pos = absPos(table.rows[i].cells[j],table); 68 if(!$("splitx_" + (pos.y + table.rows[i].cells[j].clientHeight))){ //加载可调整高度的div 69 var split = document.createElement("div"); 70 split.id = "splitx_" + (pos.y + table.rows[i].cells[j].clientHeight); 71 split.className = "splitx"; 72 split.style.cssText = "width:" + table.clientWidth + "px;left:15px;top:" + (pos.y + table.rows[i].cells[j].clientHeight - 1 + 15) + "px"; 73 split.onmousedown = function(){ 74 var index = this.getAttribute("index"); 75 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);} 76 moveMode = "cellHeight"; 77 moveArgs[moveArgs.length] = index; 78 } 79 tabEditDiv.appendChild(split); 80 } 81 if(j > 0){ //加载可调整宽度的div 82 if(!$("splity_" + pos.x)){ 83 var split = document.createElement("div"); 84 split.id = "splity_" + pos.x; 85 split.className = "splity"; 86 split.style.cssText = "height:" + table.clientHeight + "px;top:15px;left:" + (pos.x - 2 + 15) + "px"; 87 split.onmousedown = function(){ 88 var index = this.getAttribute("index"); 89 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);} 90 moveMode = "cellWidth"; 91 moveArgs[moveArgs.length] = index; 92 } 93 tabEditDiv.appendChild(split); 94 } 95 } 96 if(isadd){ 97 loadHide(); 98 } 99 table.rows[i].cells[j].onmousedown = function(){ 100 //alert("x"); 101 } 102 } 103 } 104 } 105 106 function loadHide(){ 107 cellHide = []; 108 var tempHide = []; 109 for(var i=0;i<table.rows.length;i++){ 110 for(var j=0;j<table.rows[i].cells.length;j++){ 111 for(var k=1;k<table.rows[i].cells[j].rowSpan;k++){ 112 cellHide[cellHide.length] = [i+k,j]; 113 tempHide[tempHide.length] = [i+k,j]; 114 } 115 } 116 } 117 for(var i=0;i<table.rows.length;i++){ 118 for(var j=0;j<table.rows[i].cells.length;j++){ 119 for(var k=1;k<table.rows[i].cells[j].colSpan;k++){ 120 var yc = 0; 121 for(var l=0;l<tempHide.length;l++){ 122 if(tempHide[l][0]==i&&tempHide[l][1]<j){yc++;} 123 } 124 for(var l=0;l<j;l++){ 125 if(table.rows[i].cells[l].colSpan > 1){yc+=table.rows[i].cells[l].colSpan-1;} 126 } 127 cellHide[cellHide.length] = [i,j+k+yc]; 128 } 129 } 130 } 131 } 132 133 addEvent(document,"mousemove",function(e){ 134 e = e || window.event; 135 if(moveMode == "cellWidth"){ //调整宽度 136 137 var temp = moveArgs[0]; 138 var test = ""; 139 for(var i=0;i<table.rows.length;i++){ 140 var index = temp; 141 for(var j=0;j<cellHide.length;j++){ 142 if(i==cellHide[j][0] && temp>=cellHide[j][1]){index--;} 143 } 144 if(!table.rows[i].cells[index] || index < 0 || table.rows[i].cells[index].colSpan > 1){continue;} 145 if(e.clientX > absPos(table.rows[i].cells[index]).x) 146 table.rows[i].cells[index].style.width = e.clientX - absPos(table.rows[i].cells[index]).x + "px"; 147 } 148 loadTableEdit(); 149 }else if(moveMode == "cellHeight"){ //调整高度 150 var index = moveArgs[0]; 151 for(var i=0;i<table.rows[index].cells.length;i++){ 152 if(table.rows[index].cells[i].rowSpan > 1){continue;} 153 if(e.clientY > absPos(table.rows[index].cells[i]).y) 154 table.rows[index].cells[i].style.height = e.clientY - absPos(table.rows[index].cells[i]).y + "px"; 155 } 156 loadTableEdit(); 157 } 158 }); 159 addEvent(document,"mouseup",function(e){ 160 moveMode = ""; moveArgs = []; 161 }); 162 addEvent(document,"mouseout",function(e){ 163 e = e || event; 164 if (!isMouseLeaveOrEnter(e, this)) { return; } 165 moveMode = ""; moveArgs = []; 166 });
