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">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "content-type" content = "text / html; charset = gb2312" />
<Title> Table </Title>
</ head>
<style type = "text / css">
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>
<table id = "tab" cellpacing = "1" cellpadding = "0">
<adal>
<tr>
<tdclass = "tc"> <span> id </span> <div> </div> </td>
<tdclass = "tc"> <span> select </span> <div> </div> </td>
<td> <span> nom </span> <v> </div> </td>
<td> <span> anniversaire </span> <div> </div> </td>
<td> <span> Remarques </span> <div> </div> </td>
</tr>
</ head>
<tbody>
<tr>
<td> 1 </td>
<td> <entrée type = "Checkbox"> <entrée name = "ss" type = "radio" /> </td>
<TD> Missy </td>
<TD> 1982-05-27 </td>
<TD> tasses, toutes les tasses </td>
</tr>
<tr>
<td> 3 </td>
<td> <entrée type = "Checkbox"> <entrée name = "ss" type = "radio" /> </td>
<td> li si </td>
<TD> 1983-06-27 </td>
<TD> Ouais, j'ai de bonnes compétences dans Warcraft </td>
</tr>
<tr>
<td> 2 </td>
<td> <entrée type = "Checkbox"> <entrée name = "ss" type = "radio" /> </td>
<TD> Wang Wu </td>
<TD> 1987-05-27 </td>
<TD> La lame du prince persan n'est pas mauvaise </td>
</tr>
<tr>
<td> 4 </td>
<td> <entrée type = "Checkbox"> <entrée name = "ss" type = "radio" /> </td>
<TD> zhao liu </td>
<TD> 1988-05-27 </td>
<TD> Je m'appelle Zhao Liu </td>
</tr>
<tr>
<td> 5 </td>
<td> <entrée type = "Checkbox"> <entrée name = "ss" type = "radio" /> </td>
<TD> Zhu Ba </td>
<TD> 1984-05-27 </td>
<TD> Balayez et allez vous coucher </td>
</tr>
<tr>
<td> 6 </td>
<td> <entrée type = "Checkbox"> <entrée name = "ss" type = "radio" /> </td>
<td> asdorf </td>
<TD> 1984-06-27 </td>
<TD> ASDORF Dark Room avec des lumières </td>
</tr>
<tr>
<td> 7 </td>
<td> <entrée type = "Checkbox"> <entrée name = "ss" type = "radio" /> </td>
<td> tasse </td>
<TD> 1984-06-27 </td>
<TD> Beaucoup de tasses </td>
</tr>
<tr>
<td> 8 </td>
<td> <entrée type = "Checkbox"> <entrée name = "ss" type = "radio" /> </td>
<TD> Dîne </td>
<TD> 1984-02-27 </td>
<TD> de nombreuses vaisselles </td>
</tr>
<tr>
<td> 8 </td>
<td> <entrée type = "Checkbox"> <entrée name = "ss" type = "radio" /> </td>
<TD> Ustensiles de lavage </td>
<TD> 1984-08-27 </td>
<TD> de nombreux ustensiles de lavage </td>
</tr>
<tr>
<td> 9 </td>
<td> <entrée type = "Checkbox"> <entrée name = "ss" type = "radio" /> </td>
<TD> Le calmar est plein de visage </td>
<TD> 1984-12-27 </td>
<TD> 10 Presque une nuit </td>
</tr>
<tr>
<td> 10 </td>
<td> <entrée type = "Checkbox"> <entrée name = "ss" type = "radio" /> </td>
<Td> Cialis Brother </td>
<TD> 1984-12-21 </td>
<Td> hehe </td>
</tr>
</tbody>
</ table>
<script linguisse = "javascript">
(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