<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> Table </title> <style type =" text/css "> body {font-size: 12px} # tab {border-collapse: collapse ;}. edit {height: 16px; width: 98%; background-color: # EFF7FF; f Ont-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} </style> </pead> <body> <table id = "tab" border = "0" cellspacing = "1" cellpadding = "0"> <thead> <tr> <td width = "60" class = "tc"> ID </td> <td width = "60" class = "tc"> selected </td> <td width = "100" class = "tc"> name </td> <td width = "100" class = "t C "> birthday </td> <td width =" 180 "class =" tc "> remarks </td> </tr> </thead> <tbody> <tr> <td height = "16"> 1 </td> <input type = "checkbox"> </td> <td> Zhang San </td> <td> 1982-05-27 </td> <td> cup, all cups </td> </tr> <td> 3 </td> <input type = "checkbox"> </td> <td> Li Si </td> <td> 1983-06-27 </td> <td> good technology </td> </tr> <td> 2 </td> <td> <input type = "checkbox"> </td> <td> Wang Wu </td> <td> 1983-05-27 </td> <td> Prince Persian's blade was good </td> </ Tr> <td> 4 </td> <input type = "checkbox"> </td> <td> Zhao 6 </td> <td> 1983-05-27 </td> <td> my name is Zhao liu</td> </tr> <td> 5 </td> <input type = "checkbox "> </td> <td> Zhu Ba </td> <td> 1986-05-27 </td> <td> wash and sleep </td> </tr> </tbody> </table> <script language = "javascript"> 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 .exe c (navigator. userAgent)] [0] [1] = 6 ))? True: false; s. IE7 = (s. IE & ([/MSIE (\ d )\. 0/I .exe c (navigator. userAgent)] [0] [1] = 7 ))? True: false; s. IE8 = (s. IE & ([/MSIE (\ d )\. 0/I .exe c (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.css Text = 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 Rgs = 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]; // index this with common dom elements. theadtds = this. thead. getElementsByTagName ('td '); // this. rows = []; // the reference of all tr records in tbodys. Here the array record is used because the array has the reverse method, which can be used for forward and reverse order this. clos ={}; // record reference of all column elements in this. Edits = {}; // edit table rules and prompt this. sortCol = null; // records which column is being sorted this. inputtd = null; // record which input is edited this. closarg = {tdnum: null, totdnum: null, closmove: BindAsEventListener (this, this. closmove), closup: BindAsEventListener (this, this. closup)}; // some attribute methods about column drag 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 used for editing this. input. type = "text"; this. input. className = 'edit'; this. img = d. body. appendChild (d. createElement ('div '); this. img. className = "cc"; this. lin E = d. body. appendChild (d. createElement ('div '); this. line. className = 'line'; this. line. style. top = tab. offsetTop + "px"; if (Sys. IE6) {this. checkbox ={}; // record the checkbox selected to handle ie6 incompatibility issues var checkboxs = tab. getElementsByTagName ('input'), k = 0; for (var lll = checkboxs. length; k <lll; k ++) checkboxs [k]. type = "checkbox" & addListener (checkboxs [k], "click", Bind (this, function (elm, k) {elm. checked = true? (This. checkbox [k] = elm) :( delete this. checkbox [k]) ;}, checkboxs [k], k) ;}; for (var l = set. length; I <l; I ++) {addListener (this. theadtds [set [I]. id], 'click', Bind (this, this. sortTable, this. theadtds [set [I]. id], set [I]. id, set [I]. type); set [I]. edit & (this. edits [set [I]. id] = {rule: set [I]. edit. rule, message: set [I]. edit. message}) ;}; for (l = rows. length; j <l; j ++) this. rows [j] = rows [j]; for (var k = 0, l = this. theadtds. lengt H; k <l; k ++) {this. clos [k] = []; this. theadtds [k]. setAttribute ('clos', k) addListener (this. theadtds [k], 'mouseunder', BindAsEventListener (this, this. closdrag);} for (var I = 0, l = tds1.length; I <l; I ++) {var p = I <this. theadtds. length-1? I: I % this. theadtds. length; this. clos [p] [this. clos [p]. length] = tds1 [I]; this. edits [p] & tds1 [I]. setAttribute ('edit', p);} for (var I = 0, l = divs. length; I <l; I ++) {addListener (divs [I], 'mousedown', BindAsEventListener (this, this. widthdrag);}/* ------------------------------------------- * // * ----------------------------------------------- */addListener (this. thead, 'mouseover', BindAsEventListener (this, this. the Adhover); addListener (tab. tBodies [0], 'dblclick', BindAsEventListener (this, this. edit); addListener (this. input, 'blur', Bind (this, this. save, this. input) ;}, theadhover: function (e) {e = e | window. event; var obj = e. srcElement | e.tar get; if (obj. nodeName. toLowerCase () = 'td ') this. closarg. totdnum = (obj ). getAttribute ('clos'); else if (obj. nodeName. toLowerCase () = 'div ') obj. style. cursor = "sw-resize "; }, Widthdrag: function (e) {if (Sys. IE) {e. cancelBubble = true} else {e. stopPropagation ()} this. widtharg. x = e. clientX; this. widtharg. td = (e. srcElement | e.tar get ). parentNode; if (Sys. IE) {this. widtharg. nexttd = this. widtharg. td. nextSibling;} else {this. widtharg. nexttd = this. widtharg. td. nextSibling. nextSibling;} this. widtharg. tdwidth = this. widtharg. td. offsetWidth; this. widtharg. nexttdwidth = this. wi Dtharg. nexttd. offsetWidth; this. line. style. height = this. table. offsetHeight + "px"; addListener (document, 'mousemove ', this. widtharg. widthmove); addListener (document, 'mouseup', this. widtharg. widthup) ;}, widthmove: function (e) {window. getSelection? Window. getSelection (). removeAllRanges (): document. selection. empty (); var x = e. clientX-this. widtharg. x, left = e. clientX, clientx = e. clientX; if (clientx <this. widtharg. x) {if (this. widtharg. x-clientx> this. 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. w Idtharg. 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); removeListe Ner (document, 'mouseup', this. widtharg. widthup) ;}, closdrag: function (e) {e = e | window. event; var obj = e. srcElement | e.tar get; 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. getElem EntsByTagName ('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 <l; I ++) {tds = rows [I]. getElementsByTagName ('td '); try {rows [I]. insertBefore (tds [n], tds [o]);} catch (err) {return ;}for (var I = 0, l = this. theadtds. length; I <l; I ++) This. theadtds [I]. setAttribute ('clos', I) ;}, edit: function (e) {var o = e. srcElement | e.tar get; if (! O. getAttribute ('edit') return; this. inputtd = o; var v = o. innerHTML; o. innerHTML = ""; o. appendChild (this. input); this. input. value = v; this. input. focus () ;}, save: function (o) {var edit = this. edits [o. parentNode. getAttribute ('edit')]; if (edit. rule. test (this. input. value) {this. inputtd. innerHTML = this. input. value; this. inputtd = null;} else {alert (edit. message) ;}}, sortTable: function (td, n, type) {va R frag = document. createDocumentFragment (), str = td. getElementsByTagName ('span ') [0]. innerHTML, span = td. getElementsByTagName ('span ') [0]; if (this. row! = Null | td = this. sortCol) {this. rows. reverse (); span. innerHTML = str. replace (/. $/, str. charAt (str. length-1) = "bytes "? "Identifier": "identifier");} else {this. rows. sort (this. compare (n, type); span. innerHTML = span. innerHTML + "plugin"; this. sortCol! = Null & (this. sortCol. getElementsByTagName ('span ') [0]. innerHTML = this. sortCol. getElementsByTagName ('span ') [0]. innerHTML. replace (/. $/, '') ;}; for (var I = 0, l = this. rows. length; I <l; 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, 2) {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); if (a1 = a2) return 0; return a1 </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]