Javascript implements table sorting, editing, dragging and zooming

Simple table sorting

You can double-click to edit the customized edited rules

Drag columns for column replacement

You can push the border to scale the column width

Copy code The code is as follows: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> http://www.w3.org/1999/xhtml "> 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( http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_t.bmp);color:#183C94;word-break:break-all } #tab tbody td{overflow:hidden;word-break:break-all;} #tab td{border: 1px solid #CECFCE;height:20px;line-height:20px;vertical-align:middle; } #tab td.tc{text-align:center;} .div{width:10px;height:6px; border:1px solid #999999; background-color:#FFFFFF; position:absolute; display:none;} .line{ width:2px; background-color:#999999; position:absolute; display:none} .dr{height:100%;width:2px;background:#CECFCE;float:right;margin-right:-1px;cursor:sw-resize} .r{float:right;} .l{float:left;} #tab thead td.thover{ background-image:url( http://album.hi.csdn.net/app_uploads/wtcsy/20081126/000054336.p.gif);background-repeat:repeat-x ;} ID 选中 姓名 生日 备注 1 小三 1982-05-27 杯具,全是杯具 3 李四 1983-06-27 恩恩我魔兽技术不错 2 王五 1987-05-27 波斯王子 时之刃还不错 4 赵六 1988-05-27 我叫赵六 5 朱八 1984-05-27 洗洗睡吧 6 阿斯多夫 1984-06-27 阿斯多夫暗室逢灯 7 杯具 1984-06-27 很多的杯具 8 餐具 1984-02-27 很多的餐具 8 洗具 1984-08-27 很多的洗具 9 内牛满面 1984-12-27 10快一晚 10 犀利哥 1984-12-21 嘿嘿 (function(window,undefined){ window.Sys = function (ua){ var b = { ie: /msie/.test(ua) && !/opera/.test(ua), opera: /opera/.test(ua), safari: /webkit/.test(ua) && !/chrome/.test(ua), firefox: /firefox/.test(ua), chrome: /chrome/.test(ua) },vMark = ""; for (var i in b) { if (b[i]) { vMark = "safari" == i ? "version" : i; break; } } b.version = vMark && RegExp("(?:" vMark ")[\/: ]([\d.] )").test(ua) ? RegExp.$1 : "0"; b.ie6 = b.ie && parseInt(b.version, 10) == 6; b.ie7 = b.ie && parseInt(b.version, 10) == 7; b.ie8 = b.ie && parseInt(b.version, 10) == 8; return b; }(window.navigator.userAgent.toLowerCase()); window.Sys.ie6&&document.execCommand("BackgroundImageCache", false, true);

//Alas addListener(this.thead,'mouseout',BindAsEventListener(this,this.theadOut)); //Bind the editing event and determine which table is edited based on e.srcElement or e.target addListener(tab,'dblclick',BindAsEventListener(this, this.edit)); //Save the modified content when leaving input AddListener(this.input,'blur',Bind(this,this.save,this.input)); }, SortTable :function(td,type){ //td is the clicked element, n is the column to sort, type is the type of sorting var frag=document.createDocumentFragment(),span=td.getElementsByTagName('span')[0],str= span.innerHTML; If(td===this.sortCol){ This.rows.reverse(); span.innerHTML =str.replace(/.$/,str.charAt(str.length-1)=="↓"?"↑":"↓") ; }else{ This.rows.sort(this.compare(td.getAttribute('clos'),type)); span.innerHTML = span.innerHTML "↑"; this.sortCol!=null&&(this.sortCol.getElementsByTagName('span')[0].innerHTML = this.sortCol.getElementsByTagName('span')[0].innerHTML.replace(/.$/,'')) ;//Remove the sorting mark of the previous column }; for(var i=0,l=this.rows.length;i frag.appendChild(this.rows[i]); This.table.tBodies[0].appendChild(frag); If(Sys.ie6){ for(var s in this.checkbox) this.checkbox[s].checked = true; } this.sortCol = td; //记录哪一列正在排序中 }, compare :function(n,type){ return function (a1,a2){ var convert ={ int : function(v){return parseInt(v)}, float : function(v){return parseFloat(v)}, date : function(v){return v.toString()}, string : function(v){return v.toString()} }; !convert[type]&&(convert[type]=function(v){return v.toString()}); a1 =convert[type](a1.cells[n].innerHTML); a2 =convert[type](a2.cells[n].innerHTML); return a1==a2?0:a1 }; }, edit: function(e){ var elem = this.inputtd=e.srcElement || e.target; if(!elem.getAttribute('edit'))return; this.input.value = elem.innerHTML; elem.innerHTML = ""; elem.appendChild(this.input); this.input.focus(); }, save : function(elem){ var editinfo=this.editconfig[elem.parentNode.getAttribute('edit')],status={ "[object Function]" : 'length' in editinfo.rule&&editinfo.rule(this.input.value)||false, "[object RegExp]" : 'test' in editinfo.rule&&editinfo.rule.test(this.input.value)||false }[Object.prototype.toString.call(editinfo.rule)],_self=this; //如果不符合条件 修改提示信息 typeof status != "boolean"&&(editinfo.message = status); if(status===true){ this.inputtd.innerHTML = this.input.value; this.inputtd=null; }else{ alert(editinfo.message); //firefox下 直接用input.focus()不会执行 用setTimeout可以执行 setTimeout(function(){_self.input.focus()},0); } }, theadHover : function(e){ var elem = e.srcElement || e.target; if(elem.nodeName.toLowerCase() ==='td'&&this.closConfig.on){ this.closConfig.totd = elem.getAttribute('clos'); !hasClass(elem,'thover')&&addClass(elem,'thover'); } }, theadOut : function(e){ var elem = e.srcElement || e.target; if(elem.nodeName.toLowerCase() ==='td'&&this.closConfig.on)removeClass(elem,'thover') }, dragOrWidth : function(e){ var elem = e.srcElement || e.target,widthConfig=this.widthConfig; //执行拖拽 if(elem.nodeName.toLowerCase()==='td'){ this.closConfig.td = elem.getAttribute('clos'); addListener(document,'mousemove',BindAsEventListener(this,this.dragMove)); addListener(document,'mouseup',Bind(this,this.dragUp)); this.closConfig.on = true; Sys.ie?this.thead.setCapture(false):e.preventDefault(); } //执行宽度缩放 if(elem.nodeName.toLowerCase()==='div'){ Sys.ie?(e.cancelBubble=true):e.stopPropagation(); //如果是最后一个td里面的div 不进行缩放 if(this.theadTds[this.theadTds.length-1]===elem.parentNode)return Sys.ie?this.thead.setCapture(false):e.preventDefault(); widthConfig.x = e.clientX; widthConfig.td = elem.parentNode; widthConfig.nexttd = widthConfig.td.nextSibling; while(widthConfig.nexttd.nodeName.toLowerCase()!="td"){ widthConfig.nexttd = widthConfig.nexttd.nextSibling; }; widthConfig.tdwidth = widthConfig.td.offsetWidth; widthConfig.nexttdwidth = widthConfig.nexttd.offsetWidth; this.line.style.height = this.table.offsetHeight "px"; addListener(document,'mousemove',BindAsEventListener(this,this.widthMove)); addListener(document,'mouseup',Bind(this,this.widthUp)); } }, dragMove : function(e){ window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); setStyle(this.div,{display:"block",left:e.clientX 9 "px",top:e.clientY 20 "px"}); }, dragUp :function(){ var closConfig = this.closConfig,rows = this.table.getElementsByTagName('tr'),td,n,o,i=0,l=rows.length; this.div.style.display = "none"; removeListener(document,'mousemove'); removeListener(document,'mouseup'); Sys.ie&&this.thead.releaseCapture(); closConfig.on = false; if(closConfig.totd===null)return; removeClass(this.theadTds[closConfig.totd],'thover'); //在同一列 不进行列替换 if(closConfig.td === closConfig.totd)return; //进行列替换 如果 if(closConfig.td*1 1===closConfig.totd*1){ n = closConfig.totd; o = closConfig.td; }else{ n = closConfig.td; o = closConfig.totd; } for(;i td = rows[i].getElementsByTagName('td'); rows[i].insertBefore(td[n],td[o]); } //重新标识表头 for(i=0,l=this.theadTds.length;i this.theadTds[i].setAttribute('clos',i); closConfig.totd=closConfig.td=null; }, widthMove : function(e){ window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); var widthConfig = this.widthConfig,x = e.clientX - widthConfig.x,left = e.clientX,clientX=left; if(clientX widthConfig.tdwidth-this.minWidth){ left = widthConfig.x - widthConfig.tdwidth this.minWidth; } if(clientX>widthConfig.x&&clientX - widthConfig.x>widthConfig.nexttdwidth-this.minWidth){ left =widthConfig.x widthConfig.nexttdwidth-this.minWidth; } setStyle(this.line,{display:"block",left:left "px"}); }, widthUp : function(){ this.line.style.display = "none"; var widthConfig = this.widthConfig,x= parseInt(this.line.style.left) - widthConfig.x; widthConfig.nexttd.style.width = widthConfig.nexttdwidth -x -1 'px'; widthConfig.td.style.width = widthConfig.tdwidth x -1 'px'; Sys.ie&&this.thead.releaseCapture(); removeListener(document,'mousemove'); removeListener(document,'mouseup'); } }); window.onload = function(){ Function checkName(val){ If(val.replace(/^s $/g,'')==='') return 'Name input cannot be empty'; If(val.replace(/^s |s $/,'').length>10) return 'The name cannot be longer than 10 characters'; If(!/^[u4e00-u9fa5a-z] $/i.test(val)) return 'The name can only be entered in Chinese or letters'; return true; }; function checkRemark(val){ if(val.replace(/^s $/g,'')===='') return 'Remark input cannot be empty'; if(val.replace(/^s |s $/,'').length>15) return 'The length of the note cannot be greater than 15 characters'; if(!/^[u4e00-u9fa5ws] $/i.test(val)) return 'Remarks can only enter Chinese numbers, underscores and spaces'; return true; } var set = [ {id:0,type:"int"}, {id:2,type:"string",edit:{rule:checkName,message:''}}, {id:3,type:"date",edit:{rule:/^d{4}-d{2}-d{2}$/, message:"Enter the date 1985-02-30 in this format" }}, {id:4,type:"string",edit:{rule:checkRemark,message:''}} ]; new Table($("tab"),set); }

Known BUG:

Under ie6, Chinese does not wrap automatically

It’s really annoying that letters and numbers don’t automatically wrap when not running in Internet Explorer

There seems to be a big problem when clicking and running in the Chrome browser. It would be better to get a local test

ID	姓名	生日	备注
1	小三	1982-05-27	杯具,全是杯具
3	李四	1983-06-27	恩恩我魔兽技术不错
2	王五	1987-05-27	波斯王子时之刃还不错
4	赵六	1988-05-27	我叫赵六
5	朱八	1984-05-27	洗洗睡吧
6	阿斯多夫	1984-06-27	阿斯多夫暗室逢灯
7	杯具	1984-06-27	很多的杯具
8	餐具	1984-02-27	很多的餐具
8	洗具	1984-08-27	很多的洗具
9	内牛满面	1984-12-27	10快一晚
10	犀利哥	1984-12-21	嘿嘿

Javascript implements table sorting, editing, dragging and zooming_javascript skills