首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJune 25, 2013

先上效果图：

用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>
     <div id="tabletitle">表格标题</div>
     <table id="mainTable" class="finelinetable">
         <tr>
             <td colspan="8">1</td>
         </tr>
         <tr>
             <td rowspan="3">2</td>
             <td>3</td>
             <td colspan="3">4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
         </tr>
         <tr>
             <td>8</td>
             <td>9</td>
             <td>10</td>
             <td colspan="2">11</td>
             <td>12</td>
             <td>13</td>
         </tr>
         <tr>
             <td>14</td>
             <td colspan="3">15</td>
             <td>16</td>
             <td>17</td>
             <td>18</td>
         </tr>
         <tr>
             <td colspan="8"> </td>
         </tr>
         <tr>
             <td rowspan="3"> </td>
             <td> </td>
             <td colspan="2"> </td>
             <td> </td>
             <td colspan="3"> </td>
         </tr>
         <tr>
             <td> </td>
             <td colspan="2"> </td>
             <td> </td>
             <td colspan="3"> </td>
         </tr>
         <tr>
             <td style="height: 25px"> </td>
             <td colspan="2" style="height: 25px"> </td>
             <td style="height: 25px"> </td>
             <td colspan="3" style="height: 25px"> </td>
         </tr>
         <tr>
             <td> </td>
             <td colspan="7"> </td>
         </tr>
         <tr>
             <td colspan="2"> </td>
             <td colspan="6"> </td>
         </tr>
         <tr>
             <td colspan="2"> </td>
             <td colspan="6"> </td>
         </tr>
         <tr>
             <td colspan="2"> </td>
             <td colspan="6"> </td>
         </tr>
     </table>
 </body>

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 = _node; do { if (parentNode && node == parentNode) { break; } x += node.offsetLeft; y += node.offsetTop; } while (node = 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] = func; object[event + func] = function () { object['e' + event + func](window.event); }; object.attachEvent('on' + event, object[event + func]); return true; } /*如两种方法都不具备则返回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.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 = [];
 });

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS 继承实例分析
Nov 04 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
如何提高Dom访问速度
Jan 05 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
如何用JavaScript学习算法复杂度
Apr 30 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 #Javascript
js中复制行和删除行的操作实例
Jun 25 #Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 #Javascript
js循环改变div颜色具体方法
Jun 25 #Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 #Javascript
js操作iframe的一些方法介绍
Jun 25 #Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 #Javascript
sentinel(1) protocol(1) sock(2) Stater(1) ACID(1) macos(1) XPathParser(1) mysqldump(1) xps(1) csgo(1)
You might like
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
php截取字符串函数分享
2015/02/02 PHP
js实现简单模态窗口，背景灰显
2008/11/14 Javascript
jquery 选择器部分整理
2009/10/28 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
js实现抽奖效果
2017/03/27 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
axios封装，使用拦截器统一处理接口，超详细的教程（推荐）
2019/05/02 Javascript
总结Python编程中三条常用的技巧
2015/05/11 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
python中学习K-Means和图片压缩
2017/11/20 Python
Python科学画图代码分享
2017/11/29 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
Python猴子补丁知识点总结
2020/01/05 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
详解CSS3：overflow属性
2020/11/17 HTML / CSS
C#里面如何判断一个Object是否是某种类型(如Boolean)？
2016/02/10 面试题
函授毕业生自我鉴定范文
2014/03/25 职场文书
理想演讲稿范文
2014/05/21 职场文书
工作检讨书范文
2015/01/23 职场文书
全国助残日活动总结
2015/05/11 职场文书
校运会加油稿大全
2015/07/22 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏