JavaScript implémente le tri de table, l'édition, le glisser-déposer une échelle

Auteur：Eve Cole Date de mise à jour：2025-04-30 09:00:04

Tri de table simple

Vous pouvez double-cliquer pour modifier les règles éditées personnalisées

Colonnes glissantes pour le remplacement de la colonne

Pousser les bordures à l'échelle des largeurs de colonne

La copie de code est la suivante:

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

<adal>

<Title> Table </Title>

</ head>

corps {taille de police: 12px}

#TAB {Border-Collapse: effondrement;}

.Edit {hauteur: 16px; Largeur: 98%; Color en arrière-plan: # EFF7FF; taille de police: 12px; Border: 0px;}

#tab thead td {background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_t.bmp); couleur: # 183c94; word-brisets: break-all}

#TAB TBODY TD {Overflow: Hidden; Word-Break: Break-All;}

#tab td {border: 1px solide #CECFCE; hauteur: 20px; line-height: 20px; Vertical-Align: Middle; }

#TAB TD.TC {Text-Align: Centre;}

.Div {largeur: 10px; hauteur: 6px; Border: 1px solide # 999999; Color d'arrière-plan: #FFFFF; Position: absolue; Affichage: aucun;}

.line {largeur: 2px; Color en arrière-plan: # 999999; Position: absolue; Affichage: aucun}

.Dr {Hauteur: 100%; largeur: 2px; arrière-plan: #CECFCE; Float: à droite; marge-droite: -1px; curseur: SW-Résise}

.r {float: à droite;}

.l {float: gauche;}

#tab thead td.thover {background-image: url (http://album.hi.csdn.net/app_uploads/wtcsy/20081126/000054336.p.gif); background-repeat: répéter -x;}

</ style>

<body>

<adal>

<tr>

<tdclass = "tc"> <span> select </span> <div> </div> </td>

<td> <span> anniversaire </span> <div> </div> </td>

<td> <span> Remarques </span> <div> </div> </td>

</tr>

</ head>

<tbody>

<tr>

<TD> Missy </td>

<TD> tasses, toutes les tasses </td>

</tr>

<tr>

<TD> Ouais, j'ai de bonnes compétences dans Warcraft </td>

</tr>

<tr>

<TD> La lame du prince persan n'est pas mauvaise </td>

</tr>

<tr>

<TD> Je m'appelle Zhao Liu </td>

</tr>

<tr>

<TD> Balayez et allez vous coucher </td>

</tr>

<tr>

<td> asdorf </td>

<TD> ASDORF Dark Room avec des lumières </td>

</tr>

<tr>

<td> tasse </td>

<TD> Beaucoup de tasses </td>

</tr>

<tr>

<TD> de nombreuses vaisselles </td>

</tr>

<tr>

<TD> Ustensiles de lavage </td>

<TD> de nombreux ustensiles de lavage </td>

</tr>

<tr>

<TD> Le calmar est plein de visage </td>

<TD> 10 Presque une nuit </td>

</tr>

<tr>

<Td> Cialis Brother </td>

</tr>

</tbody>

</ table>

(fonction (fenêtre, indéfinie) {

window.sys = fonction (ua) {

var b = {

ie: /msie/.test(ua) &&! /Opera/.Test (UA),

opéra: /Opera/.test(ua),

safari: /webkit/.test(ua) &&! /chrome/.test (ua),

firefox: /firefox/.test(ua),

chrome: /chrome/.test(ua)

}, vmark = "";

pour (var i en b) {

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

}

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;

retour b;

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

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

fenêtre. $ = fonction (id) {

return document.getElementById (id);

};

window.addListener = fonction (élément, e, fn) {

! element.events && (élément.events = {});

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

element.addeventListener? element.addeventListener (e, fn, false): element.attachevent ("on" + e, fn);

};

window.addListener.guid = 1;

window.removeListener = fonction (élément, e, fn) {

Var Handlers = element.Events [E], type;

if (fn) {

pour (tapez dans les gestionnaires)

if (Handlers [type] === fn) {

element.reMoveEventListener? Element.RemoveEventListener (E, FN, false): element.detachevent ("on" + e, fn);

supprimer les gestionnaires [type];

}

}autre{

pour (tapez dans les gestionnaires) {

element.reMoveEventListener? Element.RemoveEventListener (E, Handlers [Type], False): element.Detachevent ("ON" + E, Handlers [Type]);

supprimer les gestionnaires [type];

}

};

window.setStyle = fonction (e, o) {

if (typeof o == "String")

e.style.csstext = o;

autre

pour (var i in o)

e.style [i] = o [i];

};

var slice = array.prototype.slice;

window.bind = fonction (objet, amusant) {

var args = Slice.Call (arguments) .slice (2);

return function () {

return fun.apply (objet, args);

};

window.bindaseventListener = fonction (objet, amusant, args) {

var args = Slice.Call (arguments) .slice (2);

return function (event) {

return fun.apply (objet, [événement || window.event] .Concat (args));

}

};

// Copie de JQ

window.extend = function () {

var cible = arguments [0] || {}, i = 1, longueur = arguments.length, deep = true, options;

if (typeof cible === "booléen") {

Deep = Target;

Target = arguments [1] || {};

i = 2;

}

if (typeof Target! == "Object" && object.prototype.tostring.call (cible)! = "[Fonction objet]")

Target = {};

pour (; i <length; i ++) {

if ((options = arguments [i])! = null)

pour (nom var dans les options) {

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

if (cible === copie)

continuer;

if (deep && copy && typeof copy === "objet" &&! copy.nodeType) {

cible [name] = arguments.callee (Deep, src || (copy.length! = null? []: {}), copy);

}

sinon si (copie! == Undefined)

Target [name] = copy;

}

cible de retour;

};

window.objpos = fonction (o) {

var x = 0, y = 0;

do {x + = o.offsetleft; y + = o.offsetTop;} while ((o = o.offsetparent));

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

}

window.class = fonction (propriétés) {

var _class = function () {return (arguments [0]! == null && this.inialize && typeof (this.inialize) == 'function')? this.Initialize.Apply (this, arguments): this;};

_class.prototype = propriétés;

return _class;

};

window.hasclass = function (élément, className) {

return element.classname.match (new regexp ('(// s | ^)' + classname + '(// s | $)'));

};

window.addclass = function (élément, className) {

! this.hasclass (élément, className) && (élément.classname + = "" + className);

}

window.RemoveClass = function (élément, className) {

HasClass (élément, className) && (élément.classname = element.classname.replace (new regexp ('(// s | ^)' + classname + '(// s | $)'), ''));

}

})(fenêtre);

var table = new class ({

Options: {

MinWidth: 62

Initialize: fonction (onglet, set) {

this.Table = tab;

this.Rows = []; // enregistre toutes les références de TR

this.sortcol = null; // Enregistrez quelle colonne triage

this.inputtd = null; // Enregistrez quel TD est en cours de modification

this.editConfig = {}; // Règles et conseils pour l'édition de tables

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

this.headTDS = tab.getElementsByTagName ('head') [0] .getElementsByTagName ('td'); // La collection DOM couramment utilisée peut être référencée avec une propriété.

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

this.cLosconfig = {

sur: faux,

TD: NULL,

totd: null

};

this.widthconfig = {

TD: NULL,

NextTd: NULL,

x: 0,

tdwidth: 0,

NextTdWidth: 0

};

Étendre (ceci, this.options);

// Je ne connais pas la raison, si vous ne le définissez pas, vous sauterez au hasard

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

// Enregistrez ces cases à cocher, la radio est sélectionnée. IE6 ne se souviendra pas de ces états lorsqu'ils effectuent des opérations DOM.

if (sys.ie6) {

this.checkbox = {};

var checkboxs = tab.getElementsByTagName ('input'), i = 0, l = checkboxs.length;

pour (; i <l; i ++)

(Checkboxs [i] .Type == "Checkbox" || Checkboxs [i] .type == "radio") &&

addListener (checkboxs [i], "cliquez", bind (this, function (elm, i) {

elm.checked == true? (this.checkbox [i] = elm) :( supprimer this.checkbox [i]);

}, Checkboxs [i], i));

};

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

// Entrée utilisée pour l'édition

this.input = d.createElement ('entrée');

this.input.type = "texte";

this.input.classname = 'edit';

// utilisé pour afficher la div traînante

this.div = d.body.appendChild (D.CreateElement ('div'));

this.div.classname = "div";

// la ligne verticale affichée lors du zoom

this.line = d.body.appendChild (D.CreateElement ('div'));

this.line.classname = 'line';

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

// Voyagez l'ensemble pour faire des paramètres

for (; i <l; i ++) {

// lie l'événement du chasseur de têtes qui doit être trié

addListener (this.headtds [set [i] .id], 'click', bind (this, this.sortable, this.headtds [set [i] .id], set [i] .ype));

// Définissez la configuration requise pour la colonne à la table qui doit être modifiée

set [i] .edit && (this.editConfig [set [i] .id] = {règle: set [i] .edit.rule, message: set [i] .edit.mesage});

}

// Mettez tout TR dans un tableau pour le tri

pour (i = 0, l = lignes.length; i <l; i ++)

this.Rows [i] = lignes [i];

// voyage à travers tous les TD et faites des paramètres

pour (i = 0, l = tabtads.length; i <l; i ++) {

// Lorsque vous utilisez le TD sur la tête, vous devez l'utiliser lorsque vous le faites glisser avec des marques.

i <longueur && tabtads [i] .setAttribute ('clos', i);

// Ajouter un attribut d'édition au TD qui doit être modifié

i> = longueur && this.editConfig [i% longueur] && tabtads [i] .setAttribute ('edit', i% longueur);

}

// Opérations de traînée de liaison et de zoom

AddListener (this.tead, 'Mousedown', bindaseventListener (this, this.dragorwidth));

// lors de la traînée, l'enregistrement se déplace vers cette colonne TD

AddListener (this.tead, 'MouseOver', bindAsEventListener (this, this.theadhover));

//Bien

addListener (this.tead, 'muouseout', bindaseventListener (this, this.teadout));

// L'événement d'édition de liaison détermine quelle table est modifiée en fonction de e.srcelement ou e.target

addListener (tab, 'dblclick', bindaseventListener (this, this.edit));

// Enregistrer le contenu modifié lors de la sortie de l'entrée

addListener (this.input, 'blur', bind (this, this.save, this.input));

Sorttable: fonction (td, type) {// td est l'élément n qui a cliqué. Quelle colonne est le type de tri. Quel type est le tri.

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

}autre{

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 (/.$/,'''' '' ') ;// supprimer l'identifiant du type de chronique précédent Column Sorme

};

pour (var i = 0, l = this.Rows.length; i <l; i ++)

frag.appendChild (this.Rows [i]);

this.Table.tbodies [0] .APPENDCHILD (FRAG);

if (sys.ie6) {

pour (var s dans ce.checkbox)

this.Checkbox [s] .Checked = true;

}

this.sortcol = td; // Enregistrez quelle colonne triage

comparer: fonction (n, type) {

Fonction de retour (a1, a2) {

var convert = {

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

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

Date: fonction (v) {return v.toString ()},

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

};

! Convert [type] && (convert [type] = fonction (v) {return v.toString ()});

a1 = convert [type] (a1.cells [n] .InnerHtml);

a2 = convert [type] (a2.Cells [n] .InnerHtml);

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

};

edit: fonction (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 ();

Enregistrer: fonction (elem) {

var editinfo = this.editconfig [elem.parentNode.getAttribute ('édition')], status = {

"[Fonction Object]": 'longueur' dans editinfo.rule && editinfo.rule (this.input.value) || false,

"[objet regexp]": 'test' dans editinfo.rule && editinfo.rule.test (this.input.value) || false

} [Object.prototype.tostring.call (editinfo.rule)], _ self = this;

// Si les conditions ne répondent pas aux exigences, modifiez les informations rapides

typeof status! = "boolean" && (editinfo.Message = status);

if (status === true) {

this.inputtd.innerhtml = this.input.value;

this.inputtd = null;

}autre{

alert (Editinfo.Message);

// Utiliser une entrée.focus () directement sous Firefox et ne peut pas être exécuté sans exécuter SetTimeout

setTimeout (function () {_ self.input.focus ()}, 0);

}

theadhover: fonction (e) {

var elem = e.srcelement || e.target;

if (elem.nodename.tolowercase () === 'td' && this.clasconfig.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.clasconfig.on) removeclass (elem, 'thover')

dragorwidth: function (e) {

var elem = e.srcelement || e.target, widthConfig = this.widthConfig;

// Exécuter la guette

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.head.setCapture (false): e.PreventDefault ();

}

// Effectuer une échelle de largeur

if (elem.nodename.tolowercase () === 'div') {

Sys.ie? (E.cancelbubble = true): e.stoppropagation ();

// S'il s'agit du dernier TD, la div ne sera pas mise à l'échelle

if (this.headtds [this.headtds.length-1] === elem.parentNode)

Sys.ie?this.head.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.nextttd.offsetWidth;

this.line.style.height = this.Table.offsetheight + "px";

AddListener (document, «MouseMove», bindAsEventListener (this, this.widthmove));

AddListener (document, 'MouseUp', bind (this, this.widThup));

}

dragmove: fonction (e) {

window.getSelection? window.getSelection (). RemoveallRanges (): document.selection.empty ();

setStyle (this.div, {affichage: "block", gauche: e.clientx + 9 + "px", en haut: 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 = "Aucun";

RemoveListener (document, «Mousemove»);

RemoveListener (document, «sourisp»);

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

closconfig.on = false;

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

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

// Aucun remplacement de colonne n'est effectué dans la même colonne

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

// Vérifiez le remplacement de la colonne

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

n = closconfig.totd;

o = closconfig.td;

}autre{

n = closconfig.td;

o = closconfig.totd;

}

for (; i <l; i ++) {

td = lignes [i] .getElementsByTagName ('td');

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

}

// réentifier l'en-tête

pour (i = 0, l = this.headtds.length; i <l; i ++)

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

closconfig.totd = closconfig.td = null;

widthMove: fonction (e) {

window.getSelection? window.getSelection (). RemoveallRanges (): document.selection.empty ();

var widthConfig = this.widthconfig, x = e.clientx - widthconfig.x, left = e.clientx, clientx = gauche;

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

Left = widthConfig.x - widthConfig.tdwidth + this.minwidth;

}

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

Left = widthConfig.x + widthConfig.nextTdWidth-this.minwidth;

}

setStyle (this.line, {affiche: "block", gauche: gauche + "px"});

widthup: function () {

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

var widthConfig = this.widthconfig, x = parseInt (this.line.style.left) - widthConfig.x;

widthconfig.nextttd.style.width = widthconfig.nextttdwidth -x -1 + 'px';

widthconfig.td.style.width = widthconfig.tdwidth + x -1 + 'px';

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

RemoveListener (document, «Mousemove»);

RemoveListener (document, «sourisp»);

}

});

window.onload = function () {

Fonction CheckName (Val) {

if (val.replace (/ ^ / s + $ / g, '') === '') RETOUR 'L'entrée du nom ne peut pas être vide';

if (val.replace (/ ^ / s + | / s + $ /, ''). Longueur> 10) renvoie «la longueur du nom ne peut pas être supérieure à 10 caractères»;

if (! / ^ [/ u4e00- / u9fa5a-z] + $ / i.test (val)) renvoie «le nom ne peut être entré qu'en chinois ou en lettres»;

Retour Vrai;

};

Fonction CheckRemark (Val) {

if (val.replace (/ ^ / s + $ / g, '') === '') RETOUR 'Remarque Intrée ne peut pas être vide';

if (val.replace (/ ^ / s + | / s + $ /, ''). longueur> 15) return 'Remarques Longueur ne peut pas être supérieure à 15 caractères';

if (! / ^ [/ u4e00- / u9fa5 / w / s] + $ / i.test (val)) return 'Les notes ne peuvent entrer que dans l'espace de soulignement numérique chinois';

Retour Vrai;

}

var set = [

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

{id: 2, type: "String", édition: {règle: checkname, message: ''}},

{id: 3, type: "Date", edit: {règle: / ^ / d {4} / - / d {2} / - / d {2} $ /, Message: "Entrez la date 1985-02-30 dans ce format"}},

{id: 4, type: "String", édition: {règle: checkRemark, message: ''}}

]]

Nouvelle table ($ ("tab"), set);

}

</cript>

</docy>

</html>

Bogues connues:

IE6 Le texte chinois ne s'enroule pas automatiquement

C'est vraiment ennuyeux que les lettres et les chiffres ne les enveloppent pas automatiquement sous IE.

Cliquer sur le navigateur Chrome semble être un gros problème et obtenir des tests locaux sera meilleur