首页
所有分类
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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
javascript处理table表格的代码
Dec 06 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
javascript this详细介绍
Sep 19 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
关于vue-router-link选择样式设置
Apr 30 Vue.js
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
pycryto(1) 公共键(1) kafka(2) 有序排列(1) key(1) 连接器(1) 数据加密(1) 遍历文件夹(1) 曝光融合(1) shell脚本(1)
You might like
PHP多例模式介绍
2013/06/24 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
js prototype截取字符串函数
2010/04/01 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
JS实现简单拖拽效果
2017/06/21 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
推荐11个实用Python库
2015/01/23 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
python中pop()函数的语法与实例
2020/12/01 Python
Melijoe英国官网：法国儿童时尚网站
2016/11/18 全球购物
德国低价购买灯具和家具网站：Style-home.de
2016/11/25 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
家长给小学生的评语
2014/01/30 职场文书
电视购物广告词
2014/03/19 职场文书
公司授权委托书
2014/04/04 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
2016年五一促销广告语
2016/01/28 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
Nginx速查手册及常见问题
2022/04/07 Servers