Table body{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(/upload/201005/20100531233452190.bmp);color:#183C94} #tab tbody td{ overflow:hidden} #tab td{border: 1px solid #CECFCE;height:20px;line-height:20px;vertical-align:middle; } #tab td.tc{text-align:center;} .cc{width:10px;height:6px; border:1px solid #999999; background-color:#FFFFFF; position:absolute; display:none;} #tab td.red{border-color:#f30;} .ww{height:100%;width:1px;background:#CECFCE;float:right;margin-right:-1px;cursor:sw-resize} .line{ width:2px; background-color:#999999; position:absolute; display:none} ID 选中 姓名 生日 备注 1 张三 1982-05-27 杯具,全是杯具 3 李四 1983-06-27 恩恩我魔兽技术不错 2 王五 1983-05-27 波斯王子 时之刃还不错 4 赵六 1983-05-27 我叫赵六 5 朱八 1986-05-27 洗洗睡吧 var Sys = (function(ua){ var s = {}; s.IE = ua.match(/msie ([d.]+)/)?true:false; s.Firefox = ua.match(/firefox/([d.]+)/)?true:false; s.Chrome = ua.match(/chrome/([d.]+)/)?true:false; s.IE6 = (s.IE&&([/MSIE (d).0/i.exec(navigator.userAgent)][0][1] == 6))?true:false; s.IE7 = (s.IE&&([/MSIE (d).0/i.exec(navigator.userAgent)][0][1] == 7))?true:false; s.IE8 = (s.IE&&([/MSIE (d).0/i.exec(navigator.userAgent)][0][1] == 8))?true:false; return s; })(navigator.userAgent.toLowerCase()); function $(Id){ return document.getElementById(Id); }; function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn); }; function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn); }; var Css = function(e,o){ if(typeof o=="string") { e.style.cssText=o; return; } for(var i in o) e.style[i] = o[i]; }; var Bind = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function() { return fun.apply(object, args); }; }; var BindAsEventListener = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function(event) { return fun.apply(object, [event || window.event].concat(args)); }; }; var Extend = function(destination, source){ for (var property in source) { destination[property] = source[property]; }; }; var Class = function(properties){ var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;}; _class.prototype = properties; return _class; }; var Table = new Class({ initialize : function(tab,set){ this.table = tab; this.thead = tab.getElementsByTagName('thead')[0]; //常用的dom元素做成索引 this.theadtds = this.thead.getElementsByTagName('td'); // this.rows = []; //里面tbodys记录所有tr的引用 这里用数组记录是因为数组有reverse方法,可以用来正序,反序 this.clos = {}; //里面记录所有列元素的引用 this.edits = {}; //编辑表格的规则和提示 this.sortCol = null; //记录哪列正在排序中 this.inputtd = null; //记录哪个input被编辑了 this.closarg ={ tdnum : null, totdnum : null, closmove : BindAsEventListener(this,this.closmove), closup : BindAsEventListener(this,this.closup) };//关于列拖拽的一些属性方法 this.widtharg ={ td : null, nexttd : null, x : 0, tdwidth : 0, nexttdwidth : 0, widthmove : BindAsEventListener(this,this.widthmove), widthup : BindAsEventListener(this,this.widthup) }; var i=0,j=0,d=document,rows =tab.tBodies[0].rows,tds1 = tab.tBodies[0].getElementsByTagName('td'),edit=[]; var divs = this.thead.getElementsByTagName('div'); this.input = d.createElement('input'); //编辑用的input this.input.type = "text"; this.input.className = 'edit'; this.img = d.body.appendChild(d.createElement('div')); this.img.className ="cc" ; this.line = d.body.appendChild(d.createElement('div')); this.line.className = 'line'; this.line.style.top = tab.offsetTop +"px"; if(Sys.IE6){ this.checkbox = {}; //记录那些checkbox被选中了 处理ie6不兼容的问题 var checkboxs = tab.getElementsByTagName('input'),k =0; for(var lll=checkboxs.length;kthis.widtharg.tdwidth-35) left = this.widtharg.x - this.widtharg.tdwidth+35; } if(clientx>this.widtharg.x) { if(clientx - this.widtharg.x>this.widtharg.nexttdwidth-35) left = this.widtharg.x + this.widtharg.nexttdwidth-35; } Css(this.line,{display:"block",left:left+"px"}); }, widthup : function(e){ this.line.style.display = "none"; var x= parseInt(this.line.style.left) - this.widtharg.x; this.widtharg.nexttd.style.width = this.widtharg.nexttdwidth -x +'px'; this.widtharg.td.style.width = this.widtharg.tdwidth + x +'px'; removeListener(document,'mousemove',this.widtharg.widthmove); removeListener(document,'mouseup',this.widtharg.widthup); }, closdrag : function(e){ e = e || window.event; var obj = e.srcElement ||e.target; if(obj.nodeName.toLowerCase()=="span")obj =obj.parentNode; this.closarg.tdnum = obj.getAttribute('clos');; addListener(document,'mousemove',this.closarg.closmove); addListener(document,'mouseup',this.closarg.closup); }, closmove : function(e){ window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); Css(this.img,{display:"block",left:e.clientX+9+"px",top:e.clientY+20+"px"}); }, closup : function(){ this.img.style.display = "none"; removeListener(document,'mousemove',this.closarg.closmove); removeListener(document,'mouseup',this.closarg.closup); if(this.closarg.totdnum==this.closarg.tdnum)return; var rows =this.table.getElementsByTagName('tr'),tds,n,o; if((parseInt(this.closarg.tdnum)+1)==parseInt(this.closarg.totdnum)) { o = this.closarg.tdnum; n = this.closarg.totdnum; } else { n = this.closarg.tdnum; o = this.closarg.totdnum; } for(var i=0,l=rows.length;i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　推荐阅读

　　JS 类型转换常见方法小结

一、类型转换 1.转换成字串 ECMAScript的Boolean值、数字和字串的原始值的有趣之处在于它们是伪对象，这意味着它们实际上具有属性和方法。 如： Js代码 复制代码 代码如下: var sColor = "blue"; alert(sColor.len>>>详细阅读

本文标题：js 表格排序(编辑+拖拽+缩放)

地址：http://www.17bianji.com/kaifa2/JS/26278.html

 1/2    1