用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 });
原文链接: https://www.cnblogs.com/tao8825529/archive/2012/05/14/2499036.html
欢迎关注
微信关注下方公众号，第一时间获取干货硬货；公众号内回复【pdf】免费获取数百本计算机经典书籍
原创文章受到原创版权保护。转载请注明出处：https://www.ccppcoding.com/archives/50264
非原创文章文中已经注明原地址，如有侵权，联系删除
关注公众号【高性能架构探索】，第一时间获取最新文章
转载文章受原作者版权保护。转载请注明原作者出处！
