首页
所有分类
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 相关文章推荐
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
javascript html5移动端轻松实现文件上传
Mar 27 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 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
reload(1) 生成缩略图(1) 负载均衡(6) 反向代理(2) shell(3) 前后端分离(1) 默认端口(3) 二级域名(1) 防盗链(1) 动静分离(1)
You might like
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
Mootools 1.2教程 输入过滤第二部分（字符串）
2009/09/15 Javascript
jquery提升性能最佳实践小结
2010/12/06 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
opencv+python实现均值滤波
2020/02/19 Python
Pandas替换及部分替换（replace）实现流程详解
2020/10/12 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
python 操作excel表格的方法
2020/12/05 Python
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
印度领先的在线时尚商店：Koovs
2016/08/28 全球购物
豆腐の盛田屋官网：日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
意大利奢侈品牌在线精品店：Jole.it
2020/11/23 全球购物
优秀毕业自我鉴定
2014/02/15 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年元旦文艺晚会总结（学院）
2014/11/28 职场文书
入党函调证明材料
2015/06/19 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL