JavaScript implementiert die Tabellensortierung, Bearbeitung, Drag & Drop -Skalierung

Autor：Eve Cole Aktualisierungszeit：2025-04-30 09:00:04

Einfache Tischsortierung

Sie können doppelklicken, um benutzerdefinierte bearbeitete Regeln zu bearbeiten

Dragbare Spalten für den Säulenersatz

Drücken Sie die Grenzen, um die Spaltenbreiten zu skalieren

Die Codekopie lautet wie folgt:

<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">

<kopf>

<title> Tabelle </title>

</head>

Körper {Schriftgröße: 12px}

#tab {Border-Collapse: Zusammenbruch;}

.Edit {Höhe: 16px; Breite: 98%; Hintergrundfarbe:#Eff7ff; Schriftgröße: 12px; Grenze: 0px;}

#tab thead td {Hintergrund: url (http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_t.bmp); Farbe:#183c94; Word-Break: Break-ALL}

#tab tbody td {Überlauf: versteckt; Wortausbruch: Break-All;}

#tab td {Border: 1px solide #cecfce; Höhe: 20px; Linienhöhe: 20px; Vertical-Align: Middle; }

#tab td.tc {text-align: center;}

.div {width: 10px; Höhe: 6px; Grenze: 1PX Solid #999999; Hintergrundfarbe: #fffff; Position: absolut; Anzeige: keine;}

.Line {width: 2px; Hintergrundfarbe:#999999; Position: absolut; Anzeige: Keine}

.Dr {Höhe: 100%; Breite: 2px; Hintergrund: #cecfce; Float: Right; Margin-Right: -1px; Cursor: SW-RESIZE}

.r {float: rechts;}

.l {float: links;}

#tab thead td.theover {Hintergrund-image: url (http://album.hi.csdn.net/app_uploads/wtcsy/20081126/000054336.p.gif); Hintergrund-Repeat: Repeat-X;};};};};};

</style>

<body>

<kopf>

<tr>

<tdclass = "tc"> <span> Wählen Sie </span> <div> </div> </td>

<td> <span> Geburtstag </span> <div> </div> </td>

<td> <span> Bemerkungen </span> <div> </div> </td>

</tr>

</head>

<tbody>

<tr>

<td> Missy </td>

<td> Tassen, alle Tassen </td>

</tr>

<tr>

<td> Ja, ich habe gute Fähigkeiten in Warcraft </td>

</tr>

<tr>

<td> Die Klinge des persischen Prinzen ist nicht schlecht </td>

</tr>

<tr>

</tr>

<tr>

<td> Fegen und ins Bett gehen </td>

</tr>

<tr>

<td> asdorf </td>

<td> Asdorf dunkler Raum mit Lichtern </td>

</tr>

<tr>

<td> viele Tassen </td>

</tr>

<tr>

<td> Geschirr </td>

<td> Viele TABENWARE </td>

</tr>

<tr>

<td> Waschenutensilien </td>

<td> Viele Wäsche Utensils </td>

</tr>

<tr>

<td> Der Tintenfisch ist voller Gesicht </td>

<td> 10 fast eine Nacht </td>

</tr>

<tr>

<td> cialis brother </td>

</tr>

</tbody>

</table>

(Funktion (Fenster, undefiniert) {

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 = "";

für (var i in b) {

if (b [i]) {vmark = "safari" == i? "Version": i; brechen; }

}

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;

Rückkehr B;

} (window.navigator.useragent.tolowerCase ());

window.sys.ie6 && document.execcommand ("HintergrundImageCache", false, true);

Fenster. $ = Funktion (id) {

return document.getElementById (id);

};

window.addListener = Funktion (Element, e, fn) {

! element.events && (element.events = {});

element.events [e] && (element.events [e] [addierener.guid ++] = fn) || (element.events [e] = {'0': fn});

element.addeventListener? element.adDeVentListener (e, fn, false): Element.attachEvent ("on" + e, fn);

};

window.addListener.guid = 1;

window.removelistener = function (element, e, fn) {

var Handler = element.events [e], Typ;

if (fn) {

für (eingeben in Handlern)

if (Handler [Typ] === fn) {

Element.RemoveEventListener? Element.RemoveEventListener (e, fn, false): Element.DetAchEvent ("on" + e, fn);

Handler löschen [Typ];

}

}anders{

für (eingeben in Handlern) {

element.removeEventListener? element.removeEventListener (E, Handler [Typ], False): Element.DetACHEvent ("on" + E, Handler [Typ]);

Handler löschen [Typ];

}

};

window.setStyle = function (e, o) {

if (typeof o == "String")

E.Style.CSSTEXT = O;

anders

für (var i in o)

E.Style [i] = o [i];

};

var Slice = Array.Prototype.slice;

window.bind = Funktion (Objekt, Spaß) {

var args = Slice.call (Argumente) .Slice (2);

return function () {

return Fun.Apply (Objekt, Args);

};

window.bindaseventListener = Funktion (Objekt, Spaß, args) {

var args = Slice.call (Argumente) .Slice (2);

Rückgabefunktion (Ereignis) {

return Fun.Apply (Objekt, [Ereignis || window.event] .concat (args));

}

};

// Kopie aus JQ

window.extend = function () {

var target = argumente [0] || {}, i = 1, Länge = Argumente.length, Deep = true, Optionen;

if (typeof target === "boolean") {

Deep = Ziel;

Ziel = Argumente [1] || {};

i = 2;

}

if (typeof target! == "Object" && object.prototype.toString.call (Ziel)!

target = {};

für (; i <länge; i ++) {

if ((Optionen = Argumente [i])! = NULL)

für (var name in Optionen) {

var src = target [name], copy = options [name];

if (Ziel === Kopie)

weitermachen;

if (Deep && copy && typeof copy === "Objekt" &&! copy.nodetype) {

target [name] = argumente.callee (tiefe, src || (copy.length! = null? []: {}), copy);

}

sonst wenn (kopieren! == undefiniert)

Ziel [Name] = Kopie;

}

Ziel zurückgeben;

};

window.objpos = function (o) {

var x = 0, y = 0;

do {x += o.offsetLeft; y += o.offsettop;} while ((o = o.offsetParent));

return {'x': x, 'y': y};

}

window.class = function (Eigenschaften) {

var _class = function () {return (Argumente [0]! this.initialize.apply (this, Argumente): Dies;};

_class.Prototype = Eigenschaften;

Rückgabe _class;

};

window.hasclass = function (element, className) {

return element.className.match (neuer regexp ('(// s |^)'+className+'(// s | $)'));

};

window.addclass = function (element, className) {

! this.hasclass (element, className) && (element.className += "" +className);

}

window.removeclass = function (element, className) {

hasclass (Element, className) && (element.className = element.className.replace (neuer regexp ('(// s |^)'+className+'(// s | $)'), ''));

}

})(Fenster);

var table = neue Klasse ({{{

Optionen: {

Minwidth: 62

initialisieren: function (tab, set) {

this.table = tab;

this.rows = []; // Alle Referenzen von TR darin aufzeichnen

this.sortcol = null; // Aufzeichnung, welche Spalte sortiert

this.inputtd = null; // Aufzeichnen Sie, welches TD bearbeitet wird

this.editconfig = {}; // Regeln und Tipps zum Bearbeiten von Tischen

this.tead = tab.getElementsByTagName ('Kopf') [0];

this.headtds = tab.getElementsByTagName ('head') [0] .GetElementsByTagName ('td'); // Die häufig verwendete DOM -Sammlung kann mit einer Eigenschaft verwiesen werden.

this.tbodytds = tab.getElementsByTagName ('tbody') [0] .GetElementsByTagName ('td');

this.closconfig = {

ON: Falsch,

TD: NULL,

Totd: Null

};

this.widthconfig = {

TD: NULL,

NEXTTD: NULL,

x: 0,

tdwidth: 0,

NEXTTDWIDTH: 0

};

Erweitern (this, this.options);

// Ich kenne den Grund nicht, wenn Sie ihn nicht einstellen, werden Sie zufällig springen

(Sys.ie6 || sys.chrome) && (tab.width = tab.offsetwidth)

// Aufzeichnen Sie diese Kontrollkästchen, das Radio wird ausgewählt. IE6 wird sich bei DOM -Operationen nicht an diese Zustände erinnern.

if (sys.ie6) {

this.checkbox = {};

var CheckBoxs = tab.getElementsByTagName ('Eingabe'), i = 0, l = pokeBoxs.length;

für (; i <l; i ++)

(Kontrollkästchen [i] .Type == "Kontrollkästchen" || Kontrollkästchen [i] .Type == "Radio") &&

addierener (checkboxs [i], "click", bind (this, function (elm, i) {

elm.Checked == true? (this.checkbox [i] = elm) :( löschen this.checkBox [i]);

}, Checkboxs [i], i));

};

var i = 0, l = set.length, rows = tab.tbodies [0] .Rows, d = document, tabtads = tab.getElementsByTagName ('td'), Länge = this.theadtds.length;

// Eingabe zur Bearbeitung verwendet

this.input = d.createelement ('Eingabe');

this.input.Type = "text";

this.input.className = 'edit';

// wird verwendet, um das Ziebend -Div anzuzeigen

this.div = d.body.AppendChild (D.Createelement ('div'));

this.div.classname = "div";

// Die vertikale Linie wird beim Zoomen angezeigt

this.line = D.Body.AppendChild (D.Createelement ('Div'));

this.line.classname = 'line';

this.line.style.top = objpos (tab) .y +"px";

// Reisen Sie das Set, um einige Einstellungen vorzunehmen

für (; i <l; i ++) {

// Binden Sie das Headhunter -Ereignis, das sortiert werden muss

addierener (this.headtds [set [i] .id], 'click', bind (this, this.sortTable, this.headtds [set [i] .id], set [i] .type));

// Definieren Sie die erforderliche Konfiguration für die Spalte in der Tabelle, die bearbeitet werden muss

set [i] .edit && (this.editconfig [set [i] .id] = {regel: set [i] .edit.rule, meldung: set [i] .edit.message});

}

// Geben Sie alle TRs in ein Array zum Sortieren ein

für (i = 0, l = Zeilen.Length; i <l; i ++)

Dies.Rows [i] = Zeilen [i];

// Reisen Sie durch alle TDs und erstellen Sie einige Einstellungen

für (i = 0, l = tabtads.length; i <l; i ++) {

// Wenn Sie das TD auf dem Kopf verwenden, sollten Sie ihn beim Ziehen mit Markierungen verwenden.

I <Länge && tabtads [i] .setattribute ('clos', i);

// Attribut des Bearbeitens zum TD hinzufügen, das bearbeitet werden muss

i> = Länge && this.editconfig [i%length] && tabtads [i] .setAttribute ('bearbeiten', i%Länge);

}

// Binding Drag & Zoom Operations

addListener (this.tead, 'MouseDown', BindaseventListener (this, thragorwidth));

// Beim Ziehen bewegt sich der Datensatz zu dieser Spalte TD

addListener (this.tead, 'mouseover', BindaseventListener (this, this.theadhover));

//Also

addListener (this.tead, 'mouseout', BindaseventListener (this, this.teadout));

// Binding -Bearbeitungsereignis bestimmt, welche Tabelle basierend auf e.srcelement oder e.target bearbeitet wird

addierener (tab, 'dblClick', BindaseventListener (this, this.edit));

// Speichern Sie den geänderten Inhalt beim Verlassen der Eingabe

addierener (this.input, 'Blur', binden (this, this.save, this.input));

Sorttable: Funktion (TD, Typ) {// td ist das Element N, auf das geklickt wird. Welche Spalte ist der Sortierart. Welcher Typ ist die Sortierung.

var fragment = 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) == "↓"? "↑": "↓");

}anders{

this.rows.sort (this.comPare (td.getAttribute ('clos'), Typ));

span.innerhtml = span.innerhtml + "↑";

this.sortcol!

};

für (var i = 0, l = this.rows.length; i <l; i ++)

Frag.AppendChild (this.rows [i]);

this.table.tbodies [0] .AppendChild (Frag);

if (sys.ie6) {

für (var s in dieser.checkbox)

this.CheckBox [s]. Checked = true;

}

this.sortcol = td; // Aufzeichnung, welche Spalte sortiert

Vergleichen Sie: Funktion (n, Typ) {

Rückgabefunktion (A1, A2) {

var convert = {

int: function (v) {return parseInt (v)},

float: function (v) {return parsefloat (v)},

Datum: Funktion (v) {return v.toString ()},

String: Funktion (v) {return v.toString ()}

};

! konvertieren [type] && (konvertieren [type] = function (v) {return v.toString ()});

a1 = konvertieren [Typ] (a1.cells [n] .innerhtml);

a2 = konvertieren [Typ] (a2.zells [n] .innerhtml);

return a1 == a2? 0: a1 <a2? -1: 1;

};

Bearbeiten: Funktion (e) {

var elem = this.inputTd = e.srcelement || E.Target;

if (! Elem.GetAttribute ('bearbeiten') return;

this.input.Value = elem.innerhtml;

elem.innerhtml = "";

Elem.AppendChild (this.input);

this.input.focus ();

Speichern: Funktion (Elem) {

var editinfo = this.editconfig [elem.parentnode.getAttribute ('edit')], status = {

"[Objektfunktion]": 'Länge' in editInfo.rule && editinfo.rule (this.input.Value) || Falsch,

"[Object Regexp]": 'Test' in editinfo.rule && editinfo.rule.test (this.input.Value) || Falsch

} [Object.Prototype.toString.call (editInfo.rule)], _ self = this;

// Wenn die Bedingungen die Anforderungen nicht erfüllen, ändern Sie die Eingabeaufforderungsinformationen

typeof Status! = "boolean" && (editinfo.message = Status);

if (status === true) {

this.inputtd.innerhtml = this.input.Value;

this.inputtd = null;

}anders{

alert (editinfo.message);

// verwenden Sie input.focus () direkt unter Firefox und können nicht ohne Ausführung von SetTimeout ausgeführt werden

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');

}

Theadout: Funktion (e) {

var elem = e.srcelement || E.Target;

if (Elem.nodename.tolowerCase () === 'td' && this.closconfig.on) removeclass (Elem, 'thover')

Dragorwidth: Funktion (e) {

var elem = e.srcelement || e.Target, widthconfig = this.widthconfig;

// Drag & Drop ausführen

if (Elem.nodename.tolowerCase () === 'TD') {

this.closconfig.td = elem.getAttribute ('clos');

Addierener (Dokument, 'Mousemove', BindaseventListener (this, this.dragmove));

addierener (document, 'mauseup', bind (this, this.dragup));

this.closconfig.on = true;

Sys.ie?this.head.setCapture (falsch): e.preventDefault ();

}

// Breite Skalierung durchführen

if (Elem.nodename.tolowerCase () === 'div') {

Sys.ie? (E.cancelBubble = true): e.Stoppropagation ();

// Wenn es das letzte TD ist, wird die DIV nicht skaliert

if (this.headtds [this.headtds.length-1] === Elem.Parentnode) return

Sys.ie?this.head.setCapture (falsch): 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.offseteight +"px";

Addierener (Dokument, 'Mousemove', BindaseventListener (this, this.widthmove));

addierener (document, 'mauseup', bind (this, this.widthUp));

}

DragMove: Funktion (e) {

Fenster.Getelection? window.getSelection (). removeallranges (): document.Selection.Empty ();

setStyle (this.div, {display: "block", links: e.clientx+9+"px", oben: e.clienty+20+"px"});

Dragup: function () {

var closconfig = this.closconfig, rows = this.table.getElementsByTagName ('tr'), TD, N, O, i = 0, l = Zeilen.Length;

this.div.style.display = "Keine";

Removelistener (Dokument, 'Mousemove');

Removelistener (Dokument, 'Mauseup');

Sys.ie && this.thead.releascapture ();

closconfig.on = false;

if (closconfig.totd === null) return;

removeclass (this.headtds [closconfig.totd], 'thover');

// In derselben Spalte wird kein Säulenersatz durchgeführt

if (closconfig.td === closconfig.totd) return;

// Spaltenaustausch prüfen

if (closconfig.td*1+1 === closconfig.totd*1) {{

n = closconfig.totd;

o = closconfig.td;

}anders{

n = closconfig.td;

o = closconfig.totd;

}

für (; i <l; i ++) {

TD = Zeilen [i] .GetElementsByTagName ('td');

Zeilen [i] .InsertBefore (td [n], td [o]);

}

// Identifizieren Sie den Header

für (i = 0, l = this.headtds.length; i <l; i ++)

this.headtds [i] .setattribute ('clos', i);

closconfig.totd = closconfig.td = null;

widhmove: function (e) {

Fenster.Getelection? window.getSelection (). removeallranges (): document.Selection.Empty ();

var widthconfig = this.widthconfig, x = e.clientx - widthconfig.x, links = e.clientx, clientx = links;

if (clientx <widthconfig.x && widthconfig.x - clientx> widthconfig.tdwidth -this.minwidth) {

links = widthconfig.x - widthconfig.tdwidth+this.minwidth;

}

if (clientx> widthconfig.x && clientx - widthconfig.x> widthconfig.nexttdwidth -this.minwidth) {

links = widthconfig.x + widthconfig.nexttdwidth-this.minwidth;

}

setStyle (this.line, {display: "block", links: links+"px"});

widthup: function () {

this.line.style.display = "Keine";

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.releascapture ();

Removelistener (Dokument, 'Mousemove');

Removelistener (Dokument, 'Mauseup');

}

});

window.onload = function () {

Funktion checkname (val) {

if (val.Replace (/^/s+$/g, '') === '') return 'Name Eingabe kann nicht leer sein';

if (val.Replace (/^/s+|/s+$/, ''). Länge> 10) return 'Die Länge des Namens kann nicht größer als 10 Zeichen sein';

if (!/^[/u4e00-/u9fa5a-z]+$/i.test (val)) return 'Der Name kann nur in Chinesisch oder Buchstaben eingegeben werden;

zurückkehren;

};

Funktion checkRemark (val) {

if (val.Replace (/^/s+$/g, '') === '') return 'Notizinstrument kann nicht leer sein';

if (Val.Replace (/^/s+|/s+$/, ''). Länge> 15) return 'Anmerkungen nicht mehr als 15 Zeichen';

if (!/^[/u4e00-/u9fa5/w/s]+$/i.test (val)) return 'Notizen können nur den chinesischen numerischen Unterstrich eingeben';

zurückkehren;

}

var set = [

{id: 0, Typ: "int"},

{ID: 2, Typ: "String", bearbeiten: {regel: checkName, meldung: ''}},

{id: 3, type: "date", bearbeiten: {regel:/^/d {4}/-/d {2}/-/d {2} $/, meldung: "Datum 1985-02-30 in diesem Format"}},

{ID: 4, Typ: "String", bearbeiten: {regel: checkRemark, meldung: ''}}

];

Neue Tabelle ($ ("Tab"), gesetzt);

}

</script>

</body>

</html>

Bekannte Fehler:

IE6 Chinesischer Text wickelt nicht automatisch ein

Es ist wirklich ärgerlich, dass Buchstaben und Zahlen sie nicht automatisch unter IE einwickeln.

Das Klicken auf den Chrom -Browser scheint ein großes Problem zu sein, und lokale Tests zu erhalten, wird besser sein