Clasificación de mesa simple
Puede hacer doble clic para editar reglas editadas personalizadas
Columnas arrastrables para el reemplazo de columnas
Empuje los bordes a los anchos de columna de escala
La copia del código es la siguiente:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> Table </title>
</ablo>
<style type = "text/css">
Cuerpo {Font-Size: 12px}
#tab {border-colapse: colapso;}
.Edit {altura: 16px; Ancho: 98%; Color de fondo:#eff7ff; tamaño de fuente: 12px; borde: 0px;}
#tab thead td {fondo: url (http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_t.bmp); color:#183c94; word-break: break-all}
#tab tbody td {desbordamiento: oculto; word-break: break-todo;}
#tab td {borde: 1px sólido #cecfce; altura: 20px; línea-height: 20px; vertical-align: middle; }
#tab td.tc {text-align: center;}
.div {ancho: 10px; altura: 6px; borde: 1px sólido #9999999; Color de fondo: #fffff; Posición: Absoluto; Pantalla: ninguno;}
.line {ancho: 2px; Color de fondo:#999999; Posición: Absoluto; Pantalla: ninguno}
.dr {altura: 100%; ancho: 2px; fondo: #cecfce; float: right; margin-right: -1px; cursor: sw-rese}
.r {float: right;}
.l {float: izquierda;}
#tab thead td.thover {background-image: url (http://album.hi.csdn.net/app_uploads/wtcsy/20081126/000054336.p.gif); background-repeat: repetir-x;}
</style>
<Body>
<table id = "tab" cellPacing = "1" cellPadding = "0">
<Evista>
<tr>
<tdclass = "tc"> <span> id </span> <div> </div> </td>
<tdclass = "tc"> <span> select </span> <div> </div> </td>
<td> <span> nombre </span> <div> </div> </td>
<TD> <span> cumpleaños </span> <div> </div> </td>
<td> <span> Observaciones </span> <div> </div> </td>
</tr>
</ablo>
<Tbody>
<tr>
<TD> 1 </td>
<TD> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<TD> Missy </td>
<TD> 1982-05-27 </td>
<td> tazas, todas las tazas </td>
</tr>
<tr>
<TD> 3 </td>
<TD> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<TD> li si </td>
<TD> 1983-06-27 </td>
<TD> Sí, tengo buenas habilidades en Warcraft </td>
</tr>
<tr>
<TD> 2 </td>
<TD> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<TD> Wang Wu </td>
<TD> 1987-05-27 </td>
<td> La hoja del príncipe persa no es malo </td>
</tr>
<tr>
<TD> 4 </td>
<TD> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<TD> Zhao Liu </td>
<TD> 1988-05-27 </td>
<TD> Mi nombre es zhao liu </td>
</tr>
<tr>
<TD> 5 </td>
<TD> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<TD> ZHU BA </td>
<TD> 1984-05-27 </td>
<td> barrer y ir a la cama </td>
</tr>
<tr>
<TD> 6 </td>
<TD> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<td> asdorf </td>
<TD> 1984-06-27 </td>
<TD> Asdorf Dark Room With Lights </td>
</tr>
<tr>
<TD> 7 </td>
<TD> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<TD> CUP </td>
<TD> 1984-06-27 </td>
<TD> Muchas tazas </td>
</tr>
<tr>
<TD> 8 </td>
<TD> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<td> vajilla </td>
<TD> 1984-02-27 </td>
<TD> Muchas vajillas </td>
</tr>
<tr>
<TD> 8 </td>
<TD> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<TD> UTENSILES DE LAVA </td>
<TD> 1984-08-27 </td>
<TD> Muchos utensilios de lavado </td>
</tr>
<tr>
<TD> 9 </td>
<TD> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<TD> El calamar está lleno de cara </td>
<TD> 1984-12-27 </td>
<TD> 10 casi una noche </td>
</tr>
<tr>
<TD> 10 </td>
<TD> <input type = "checkbox"> <input name = "ss" type = "radio" /> </td>
<TD> Cialis Brother </td>
<TD> 1984-12-21 </td>
<TD> jeje </td>
</tr>
</tbody>
</table>
<script language = "javaScript">
(función (ventana, indefinida) {
window.sys = function (ua) {
var b = {
es decir: /msie/.test(ua) &&! /persa/.test (ua),
ópera: /opera/.test(ua),
safari: /webkit/.test(ua) &&! /chrome/.test (ua),
Firefox: /firefox/.test(ua),
Chrome: /Chrome/.Test(ua)
}, vmark = "";
para (var i en b) {
if (b [i]) {vmark = "safari" == i? "Versión": I; romper; }
}
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;
regreso B;
} (Window.Navigator.Useragent.tOlowerCase ());
window.sys.ie6 && document.execCommand ("BackgroundImageCache", falso, true);
ventana. $ = function (id) {
return document.getElementById (id);
};
window.addListener = function (element, e, fn) {
! element.events && (element.events = {});
element.events [e] && (element.events [e] [addListener.guid ++] = fn) || (element.events [e] = {'0': fn});
element.adDeventListener? Element.adDeventListener (e, fn, falso): element.attachevent ("on" + e, fn);
};
Window.addListener.guid = 1;
window.removelistener = function (element, e, fn) {
Var manejadores = element.events [e], type;
if (fn) {
para (escriba los manejadores)
if (Handlers [type] === fn) {
element.removeEventListener? Element.RemoveEventListener (e, fn, falso): element.detachevent ("on" + e, fn);
eliminar manejadores [tipo];
}
}demás{
para (escriba manejadores) {
element.removeEventListener? Element.RemoveEventListener (e, Handlers [type], false): element.detachevent ("on" + e, manejadores [type]);
eliminar manejadores [tipo];
}
}
};
Window.setStyle = function (e, o) {
if (typeof o == "cadena")
e.style.csstext = o;
demás
para (var i in o)
e.style [i] = o [i];
};
var slice = array.prototype.slice;
window.bind = function (objeto, diversión) {
var args = slice.call (argumentos) .slice (2);
Función de retorno () {
return fun.apply (objeto, args);
};
};
window.bindaseVentListener = function (objeto, diversión, args) {
var args = slice.call (argumentos) .slice (2);
función de retorno (evento) {
return fun.apply (objeto, [evento || window.event] .concat (args));
}
};
// Copiar desde JQ
window.extend = function () {
var objetivo = argumentos [0] || {}, i = 1, longitud = argumentos.length, profundo = true, opciones;
if (typeof Target === "Boolean") {
profundo = objetivo;
objetivo = argumentos [1] || {};
i = 2;
}
if (typeof Target! == "Object" && object.prototype.tostring.call (target)! = "[función de objeto]")
objetivo = {};
para (; i <longitud; i ++) {
if ((opciones = argumentos [i])! = nulo)
para (nombre var en opciones) {
var src = target [name], copy = options [name];
if (Target === Copy)
continuar;
if (profundo && copy && typeof Copy === "Object" &&! Copy.nodeType) {
Target [name] = arguments.callee (profundo, src || (copy.length! = null? []: {}), copiar);
}
más if (copia! == Undefined)
objetivo [nombre] = copia;
}
}
objetivo de retorno;
};
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 (propiedades) {
var _class = function () {return (argumentos [0]! == null && this.initialize && typeof (this.initialize) == 'function')? this.initialize.apply (this, argumentos): this;};
_class.prototype = propiedades;
return _class;
};
window.hasclass = function (elemento, classname) {
return element.classname.match (new Regexp ('(// s |^)'+classname+'(// s | $)');
};
window.addclass = function (elemento, classname) {
! this.hasclass (elemento, classname) && (element.classname += "" +classname);
}
window.removeclass = function (elemento, classname) {
Hasclass (elemento, classname) && (element.classname = element.classname.replace (new Regexp ('(// s |^)'+classname+'(// s | $)'), ''));
}
})(ventana);
table var = nueva clase ({
Opciones: {
Minwidth: 62
},
Initialize: function (tab, set) {
this.table = tabs;
this.rows = []; // Registre todas las referencias de TR en él
this.sortCol = null; // Grabar qué columna está clasificando
this.inputtd = null; // registro que TD se está editando
this.EditConfig = {}; // Reglas y consejos para editar tablas
this.tead = tab.getElementsByTagName ('Head') [0];
this.headtds = tab.getElementsByTagName ('Head') [0] .getElementsByTagName ('td'); // La colección DOM comúnmente utilizada puede referenciarse con una propiedad.
this.tbodytds = tab.getElementsBytagName ('tbody') [0] .getElementsBytagName ('td');
this.cloConfig = {
en: falso,
TD: NULL,
TOTD: NULL
};
this.WidthConfig = {
TD: NULL,
Nexttd: NULL,
x: 0,
TDWIDTH: 0,
nexttdwidth: 0
};
Extender (this, this.Options);
// No sé la razón, si no la configuras, saltarás al azar
(Sys.ie6 || sys.chrome) && (tab.width = tab.offsetwidth)
// Grabar esas casillas de verificación, se selecciona la radio. IE6 no recordará estos estados al hacer operaciones DOM.
if (sys.ie6) {
this.checkbox = {};
varilla de verificación var = tab.getElementsBytagName ('input'), i = 0, l = checkboxs.length;
para (; i <l; i ++)
(casillas de verificación [i] .type == "casilla de verificación" || casillas de verificación [i] .type == "radio") &&
AddListener (casillas de verificación [i], "hacer clic", bind (this, function (Elm, i) {
Elm.checked == verdadero? (this.eckbox [i] = elm) :( Eliminar this.eckbox [i]);
}, casillas de verificación [i], i));
};
var i = 0, l = set.length, filas = tab.tbodies [0] .Rows, d = document, tabtads = tab.getElementsByTagName ('td'), longitud = this.theadtds.length;
// Entrada utilizada para editar
this.input = d.createElement ('entrada');
this.input.type = "text";
this.input.classname = 'editar';
// se usa para mostrar el DIV de arrastre
this.div = d.body.appendChild (d.createElement ('div'));
this.div.classname = "div";
// La línea vertical se muestra al zoom
this.line = D.Body.AppendChild (D.CreateElement ('div'));
this.line.classname = 'línea';
this.line.style.top = objpos (tab) .y +"px";
// viaja el set para hacer algunas configuraciones
para (; i <l; i ++) {
// Atar el evento de cabecera que necesita ser ordenado
addListener (this.headtds [set [i] .id], 'hacer clic', bind (this, this.sorttable, this.headtds [set [i] .id], set [i] .type));
// Defina la configuración requerida para la columna a la tabla que debe editarse
set [i] .Edit && (this.editconfig [set [i] .id] = {regla: set [i] .Edit.rule, mensaje: set [i] .Edit.message});
}
// poner todo TR en una matriz para clasificar
para (i = 0, l = shows.length; i <l; i ++)
this.rows [i] = filas [i];
// viajar a través de todos los TD y hacer algunas configuraciones
para (i = 0, l = tabtads.length; i <l; i ++) {
// Al usar el TD en la cabeza, debe usarlo al arrastrarlo con marcas.
i <longitud && tabtads [i] .SetAttribute ('Clos', i);
// Agregar atributo de edición al TD que necesita ser editado
i> = longitud && this.editconfig [i%longitud] && tabtads [i] .SetAttribute ('editar', i%longitud);
}
// Operaciones de arrastre y zoom atrasa
AddListener (this.tead, 'MouseDown', bindaseVentListener (this, this.dragorwidth));
// Al arrastrar, el registro se mueve a esa columna TD
AddListener (this.tead, 'rouseover', bindaseVentListener (this, this.theadhover));
//Bueno
addListener (this.tead, 'mouseOut', bindaseVentListener (this, this.teadout));
// Evento de edición vinculante determina qué tabla se edita en base a E.Srcelement o E.Target
addListener (tab, 'dblClick', bindaseVentListener (this, this.Edit));
// Guardar el contenido modificado al dejar la entrada
addListener (this.input, 'blur', bind (this, this.save, this.input));
},
sorttable: function (td, type) {// td es el elemento n que hizo clic. ¿Qué columna es el tipo de clasificación? ¿Qué tipo es la clasificación?
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) == "↓"? "↑": "↓");
}demás{
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 (/.
};
para (var i = 0, l = this.rows.length; i <l; i ++)
frag.appendChild (this.rows [i]);
this.table.tbodies [0] .AppendChild (frag);
if (sys.ie6) {
para (var s en this.eckbox)
this.Checkbox [s] .ecked = true;
}
this.sortCol = td; // Grabar qué columna está clasificando
},
Comparar: function (n, type) {
Función de retorno (a1, a2) {
var convert = {
int: function (v) {return parseInt (v)},
flotante: function (v) {return parsefloat (v)},
fecha: función (v) {return v.ToString ()},
string: function (v) {return v.ToString ()}
};
!convert[type]&&(convert[type]=function(v){return v.toString()});
a1 = convertir [type] (a1.cells [n] .innerhtml);
a2 = convertir [type] (a2.cells [n] .innerhtml);
return a1 == a2? 0: a1 <a2? -1: 1;
};
},
editar: function (e) {
var elem = this.inputtd = e.srcelement || E.Target;
if (! Elem.getAttribute ('editar')) 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 = {
"[Función de objeto]": 'Longitud' en editinfo.rule && editinfo.rule (this.input.value) || false,
"[Object regexp]": 'test' en editinfo.rule && editinfo.rule.test (this.input.value) || false
} [Object.Prototype.ToString.call (editInfo.rule)], _ self = this;
// Si las condiciones no cumplen con los requisitos, modifique la información de solicitud
typeof status! = "boolean" && (editinfo.message = status);
if (status === true) {
this.inputtd.innerhtml = this.input.value;
this.inputtd = null;
}demás{
alerta (editInfo.message);
// use input.focus () directamente en Firefox y no se puede ejecutar sin ejecutar setTimeOT
setTimeOut (function () {_ self.input.focus ()}, 0);
}
},
theadHover: function (e) {
var elem = E.Srcelement || E.Target;
if (elem.nodename.tolowercase () === 'td' && this.cloconfig.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.cloconfig.on) RemoveClass (Elem, 'thover')
},
dragorwidth: function (e) {
var elem = E.Srcelement || E.Target, WidthConfig = this.WidthConfig;
// ejecutar arrastrar y soltar
if (elem.nodename.tolowercase () === 'td') {
this.closconfig.td = elem.getAttribute ('Clos');
AddListener (documento, 'MouseMove', BindaseVentListener (this, this.dragmove));
addListener (documento, 'mouseup', bind (this, this.dragup));
this.cloConfig.on = true;
Sys.ie?this.head.setCapture (falso): E.PreventDefault ();
}
// realizar escala de ancho
if (elem.nodename.tolowercase () === 'div') {
Sys.ie? (E.CancelBubble = True): e.stoppropagation ();
// Si es el último TD, el DIV no se escalará
if (this.headtds [this.headtds.length-1] === Elem.ParentNode) return
Sys.ie?this.head.setCapture (falso): 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 (documento, 'MouseMove', BindaseVentListener (this, this.widthmove));
addListener (documento, 'mouseup', bind (this, this.widthup));
}
},
dragMove: function (e) {
Window.getSelection? Window.getSelection (). removealLranges (): document.selection.empty ();
setStyle (this.div, {display: "bloque", izquierda: e.clientx+9+"px", top: e.clienty+20+"px"});
},
dragup: functer () {
var celoConfig = this.CloConfig, filas = this.table.getElementsBytagName ('tr'), td, n, o, i = 0, l = Rows.length;
this.div.style.display = "Ninguno";
removelistener (documento, 'mouseMove');
removelistener (documento, 'mouseup');
Sys.ie && this.thead.ReleaseCapture ();
Closconfig.on = false;
if (Closconfig.totd === NULL) return;
RemoveClass (this.headtds [Closconfig.totd], 'thover');
// No se realiza ningún reemplazo de columna en la misma columna
if (Closconfig.td === Closconfig.totd) return;
// Verifique el reemplazo de la columna
if (Closconfig.td*1+1 === Closconfig.totd*1) {
n = Closconfig.totd;
O = Closconfig.td;
}demás{
n = Closconfig.td;
O = Closconfig.totd;
}
para (; i <l; i ++) {
td = filas [i] .getElementsBytagName ('td');
filas [i] .insertbefore (td [n], td [o]);
}
// reidentificar el encabezado
para (i = 0, l = this.headtds.length; i <l; i ++)
this.headtds [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, izquierda = e.clientx, clientx = izquierda;
if (clientx <widthconfig.x && widthconfig.x - clientx> widthconfig.tdwidth-this.minwidth) {
izquierda = widthconfig.x - widthconfig.tdwidth+this.minwidth;
}
if (clientx> widthconfig.x && clientx - widthconfig.x> widthconfig.nexttdwidth-this.minwidth) {
izquierda = widthconfig.x + widthconfig.nexttdwidth-this.minwidth;
}
setStyle (this.line, {display: "bloque", izquierda: izquierda+"px"});
},
widthup: function () {
this.line.style.display = "Ninguno";
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 (documento, 'mouseMove');
removelistener (documento, 'mouseup');
}
});
window.onload = function () {
Nombre de verificación de funciones (val) {
if (val.replace (/^/s+$/g, '') === '') return 'El nombre de la entrada no puede estar vacío';
if (val.replace (/^/s+|/s+$/, ''). Longitud> 10) Devolver 'La longitud del nombre no puede ser mayor de 10 caracteres';
if (!/^[/u4e00-/u9fa5a-z]+$/i.test (val)) devolver 'El nombre solo se puede ingresar en chino o letras';
devolver verdadero;
};
función checkremark (val) {
if (val.replace (/^/s+$/g, '') === '') return 'Nota La entrada no puede estar vacía';
if (val.replace (/^/s+|/s+$/, ''). Longitud> 15) Retorno 'Observaciones La longitud no puede ser mayor de 15 caracteres';
if (!/^[/u4e00-/u9fa5/w/s]+$/i.test (val)) return 'Las notas solo pueden ingresar al espacio inferior numérico chino';
devolver verdadero;
}
var set = [
{id: 0, tipo: "int"},
{id: 2, type: "string", editar: {regla: checkName, mensaje: ''}},
{id: 3, type: "date", editar: {regla:/^/d {4}/-/d {2}/-/d {2} $/, mensaje: "Ingrese la fecha 1985-02-30 en este formato"}},
{id: 4, type: "string", editar: {regla: checkremark, mensaje: ''}}
];
nueva tabla ($ ("tab"), set);
}
</script>
</body>
</html>
Errores conocidos:
IE6 El texto chino no se envuelve automáticamente
Es realmente molesto que las letras y los números no los envuelvan automáticamente bajo IE.
Hacer clic en el navegador Chrome parece ser un gran problema y obtener pruebas locales será mejor