Простая сортировка таблицы
Вы можете дважды щелкнуть, чтобы отредактировать отредактированные правила
Перетаскиваемые столбцы для замены столбца
Нажмите границы, чтобы масштабировать ширину столбца
Кода -копия выглядит следующим образом:
<! 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">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> Таблица </title>
</head>
<стиль типа = "text/css">
тело {font-size: 12px}
#tab {Border-Collapse: Collapsse;}
.Edit {высота: 16px; Ширина: 98%; фоновый цвет:#eff7ff; размер шрифта: 12px; граница: 0px;}
#tab thead td {founal: url (http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_t.bmp); цвет:#183c94; Word-Break: Break-All}
#tab tbody td {overflow: hidden; Word-Break: Break-All;}
#tab td {border: 1px solid #cecfce; высота: 20px; линия линии: 20px; вертикальный-альна: средний; }
#tab td.tc {text-align: center;}
.div {ширина: 10px; высота: 6px; Граница: 1PX SOLIT #999999; фоновый цвет: #fffff; позиция: абсолютно; дисплей: нет;}
.line {ширина: 2px; фоновый цвет:#9999999; позиция: абсолютно; дисплей: нет}
.dr {высота: 100%; ширина: 2px; фон: #cecfce; float: right; маржинаж вправо: -1px; cursor: sw-resize}
.r {float: справа;}
.l {float: left;}
#tab thead td.thover {founal-image: url (http://album.hi.csdn.net/app_uploads/wtcsy/20081126/000054336.p.gif); founal-repeat: repeat-x;}
</style>
<тело>
<таблица id = "tab" cellpacing = "1" cellpadding = "0">
<голова>
<tr>
<tdclass = "tc"> <pan> id </span> <div> </div> </td>
<tdclass = "tc"> <pan> select </span> <div> </div> </td>
<td> <pan> Имя </span> <div> </div> </td>
<Td> <pan> день рождения </span> <div> </div> </td>
<td> <pan> Замечания </span> <div> </div> </td>
</tr>
</head>
<tbody>
<tr>
<td> 1 </td>
<td> <input type = "fackbox"> <input name = "ss" type = "radio" /> < /td>
<Td> Missy </td>
<TD> 1982-05-27 </TD>
<TD> чашки, все чашки </td>
</tr>
<tr>
<td> 3 </td>
<td> <input type = "fackbox"> <input name = "ss" type = "radio" /> < /td>
<td> li si </td>
<Td> 1983-06-27 </td>
<Td> Да, у меня хорошие навыки в Warcraft </td>
</tr>
<tr>
<td> 2 </td>
<td> <input type = "fackbox"> <input name = "ss" type = "radio" /> < /td>
<Td> wang wu </td>
<Td> 1987-05-27 </td>
<Td> лезвие персидского принца не плохое </td>
</tr>
<tr>
<td> 4 </td>
<td> <input type = "fackbox"> <input name = "ss" type = "radio" /> < /td>
<Td> Zhao Liu </td>
<TD> 1988-05-27 </TD>
<TD> Меня зовут Чжао Лю </td>
</tr>
<tr>
<td> 5 </td>
<td> <input type = "fackbox"> <input name = "ss" type = "radio" /> < /td>
<Td> Zhu Ba </td>
<Td> 1984-05-27 </td>
<TD> подметать и ложиться спать </td>
</tr>
<tr>
<td> 6 </td>
<td> <input type = "fackbox"> <input name = "ss" type = "radio" /> < /td>
<Td> asdorf </td>
<Td> 1984-06-27 </td>
<Td> asdorf Dark Room с огнями </td>
</tr>
<tr>
<td> 7 </td>
<td> <input type = "fackbox"> <input name = "ss" type = "radio" /> < /td>
<TD> CUP </TD>
<Td> 1984-06-27 </td>
<TD> Многие чашки </td>
</tr>
<tr>
<td> 8 </td>
<td> <input type = "fackbox"> <input name = "ss" type = "radio" /> < /td>
<TD> Ужин -посуда </td>
<Td> 1984-02-27 </td>
<TD> Много табличного посуда </td>
</tr>
<tr>
<td> 8 </td>
<td> <input type = "fackbox"> <input name = "ss" type = "radio" /> < /td>
<TD> мытья посуда </td>
<Td> 1984-08-27 </td>
<TD> Многие мытья посуда </td>
</tr>
<tr>
<td> 9 </td>
<td> <input type = "fackbox"> <input name = "ss" type = "radio" /> < /td>
<TD> Сквозь полон лица </td>
<Td> 1984-12-27 </td>
<td> 10 почти одна ночь </td>
</tr>
<tr>
<td> 10 </td>
<td> <input type = "fackbox"> <input name = "ss" type = "radio" /> < /td>
<Td> брат cialis </td>
<TD> 1984-12-21 </td>
<td> хе -хе </td>
</tr>
</tbody>
</table>
<script language = "javascript">
(функция (окно, неопределенное) {
window.sys = function (ua) {
var b = {
т.е. /msie/.test(ua) &&! /pera/.test (ua),
Opera: /opera/.test(ua),
Safari: /webkit/.test(ua) &&! /chrome/.test (ua),
Firefox: /firefox/.test(ua),
Chrome: /chrome/.test(ua)
}, vmark = "";
для (var i in b) {
if (b [i]) {vmark = "safari" == i? "Версия": я; перерыв; }
}
b.version = vmark && regexp ("(?:" + vmark + ") [///:] ([// d.] +)"). тест (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;
возврат B;
} (window.navigator.useragent.tolowercase ());
window.sys.ie6 && document.execcommand ("founalImageCache", false, true);
window. $ = 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, false): element.attachevent ("on" + e, fn);
};
window.addlistener.guid = 1;
window.removelistener = function (element, e, fn) {
var Handlers = element.Events [e], тип;
if (fn) {
для (введите обработчики)
if (Handlers [type] === fn) {
element.RemoveEventListener? element.RemoveEventListener (e, fn, false): element.detachevent ("on" + e, fn);
Удалить обработчики [тип];
}
}еще{
для (введите в обработчиках) {
element.RemoveEventListener? element.RemoveEventListener (e, Handlers [type], false): element.detachevent ("on" + e, Handlers [type]);
Удалить обработчики [тип];
}
}
};
window.setstyle = function (e, o) {
if (typeof o == "String")
e.style.csstext = o;
еще
для (var i in o)
e.style [i] = o [i];
};
var slice = array.prototype.slice;
window.bind = function (Object, Fun) {
var args = slice.call (аргументы) .slice (2);
return function () {
вернуть fun.apply (объект, args);
};
};
window.bindaseventlistener = function (Object, Fun, Args) {
var args = slice.call (аргументы) .slice (2);
возврат функции (событие) {
return fun.apply (Object, [event || window.event] .concat (args));
}
};
// копирование из JQ
window.extend = function () {
var target = аргументы [0] || {}, i = 1, length = arguments.length, deep = true, опции;
if (typeof target === "boolean") {
Deep = Target;
Target = аргументы [1] || {};
i = 2;
}
if (typeof target! == "Object" && object.prototype.tostring.call (target)! = "
target = {};
for (; i <length; i ++) {
if ((options = аргументы [i])! = null)
для (имя var в параметрах) {
var src = target [name], copy = options [name];
if (target === Copy)
продолжать;
if (deep && copy && typeof copy === "object" &&! copy.nodetype) {
target [name] = arguments.callee (deep, src || (copy.length! = null? []: {}), copy);
}
иначе if (копия! == не определен)
Target [name] = copy;
}
}
вернуть цель;
};
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 (свойства) {
var _class = function () {return (аргументы [0]! == null && this.initialize && typeof (this.initialize) == 'function')? this.initialize.apply (это, аргументы): this;};
_class.prototype = свойства;
вернуть _class;
};
window.hasclass = function (element, classname) {
return element.classname.match (new 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 (new Regexp ('(// s |^)'+classname+'(// s | $)'), ''));
}
})(окно);
var table = новый класс ({
параметры :{
Minweidth: 62
},
инициализировать: function (tab, set) {
this.table = tab;
this.rows = []; // записывать все ссылки на TR в нем
this.sortcol = null; // Записать, какой столбец сортируется
this.inputtd = null; // Записать, какой TD отредактируется
this.editconfig = {}; // Правила и советы по редактированию таблиц
this.tead = tab.getelementsbytagname ('head') [0];
this.headtds = tab.getelementsbytagname ('head') [0] .getelementsbytagname ('td'); // Обычно используемая коллекция DOM можно ссылаться со свойством.
this.tbodytds = tab.getelementsbytagname ('tbody') [0] .getElementsbytagname ('td');
this.closconfig = {
В: Неверно,
TD: NULL,
Тотд: NULL
};
this.widthConfig = {
TD: NULL,
Nexttd: Null,
x: 0,
tdwidth: 0,
NexttdWidth: 0
};
Extend (это, this.options);
// Я не знаю причину, если вы не установите ее, вы будете случайным образом прыгать
(Sys.ie6 || sys.chrome) && (tab.width = tab.offsetwidth)
// Записывают эти флажки, радио выбирается. IE6 не будет помнить эти состояния при выполнении операций DOM.
if (sys.ie6) {
this.checkbox = {};
var fackbox = tab.getElementsbytagname ('input'), i = 0, l = factobboxs.length;
для (; i <l; i ++)
(Флакторы [i] .type == "Флакторы" || Флакторы [i] .type == "Radio") &&
AddListener (флажки [i], «щелкнуть», bind (this, function (elm, i) {
elm.checked == true? (this.checkbox [i] = elm) :( Удалить это.checkbox [i]);
}, флажки [i], i));
};
var i = 0, l = set.length, rows = tab.tbodies [0] .Rows, d = document, tabTads = tab.getElementsbytagname ('td'), length = this.TheAdtds.length;
// ввод, используемый для редактирования
this.input = d.createElement ('input');
this.input.type = "text";
this.input.classname = 'edit';
// используется для отображения перетаскивания
this.div = d.body.appendchild (d.createElement ('div'));
this.div.classname = "div";
// вертикальная линия, отображаемая при масштабировании
this.line = d.body.appendchild (d.createElement ('div'));
this.line.classname = 'line';
this.line.style.top = objpos (tab) .y +"px";
// путешествовать по набору, чтобы сделать некоторые настройки
for (; i <l; i ++) {
// связывать событие Headhunter, которое нужно отсортировать
addlistener (this.headtds [set [i] .id], 'click', bind (this, this.sorttable, this.headtds [set [i] .id], set [i] .type));
// Определите необходимую конфигурацию для столбца в таблицу, которую необходимо отредактировать
set [i] .edit && (this.editconfig [set [i] .id] = {rule: set [i] .edit.rule, сообщение: set [i] .edit.message});
}
// Поместите все TR в массив для сортировки
for (i = 0, l = row.length; i <l; i ++)
this.rows [i] = row [i];
// Путешествие по всем TDS и сделайте некоторые настройки
for (i = 0, l = tabtads.length; i <l; i ++) {
// При использовании TD на голове вы должны использовать его при перетаскивании с метками.
I <Length && tabTads [i] .setAttribute ('clos', i);
// добавить атрибут редактирования в TD, который необходимо отредактировать
i> = length && this.editconfig [i%length] && tabtads [i] .setattribute ('edit', i%length);
}
// Операции по переплетению и увеличению
addlistener (this.tead, 'mousedown', bindaseventlistener (это, this.dragorwidth));
// при перетаскивании запись перемещается в этот столбец TD
addlistener (this.tead, 'mouseover', bindaseventlistener (this, this.theadhover));
//хорошо
addlistener (this.tead, 'mouseout', bindaseventlistener (this, this.teadout));
// событие редактирования привязки определяет, какая таблица отредактирована на основе E.Srcelement или E.Target
AddListener (Tab, 'dblclick', BindaseventListener (this, this.edit));
// Сохранить модифицированный контент при уходе
addlistener (this.input, 'blur', bind (this, this.save, this.input));
},
SortTable: function (td, type) {// td - это элемент 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) == "↓"? "↑": "↓");
}еще{
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 (/.$/, ''') ;// Удалить идентификатор предыдущего столбца.
};
для (var i = 0, l = this.rows.length; i <l; i ++)
frag.appendchild (this.rows [i]);
this.table.tbodies [0] .appendchild (frag);
if (sys.ie6) {
для (var s в этом. Коклек)
this.checkbox [s] .checked = true;
}
this.sortcol = td; // Записать, какой столбец сортируется
},
Сравните: function (n, type) {
Возвращается функция (A1, A2) {
var convert = {
int: function (v) {return parseint (v)},
float: function (v) {return parsefloat (v)},
Дата: function (v) {return v.toString ()},
String: function (v) {return v.toString ()}
};
! преобразовать [type] && (преобразовать [type] = function (v) {return v.toString ()});
a1 = конвертировать [type] (a1.cells [n] .innerhtml);
a2 = преобразовать [тип] (a2.cells [n] .innerhtml);
вернуть a1 == a2? 0: a1 <a2? -1: 1;
};
},
Изменить: function (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 ();
},
Сохранить: function (elem) {
var editinfo = this.editconfig [elem.parentnode.getattribute ('edit')], status = {
"[Object Function]": «длина 'в editinfo.rule && editinfo.rule (this.input.value) || false,
"[Object Regexp]": «Тест» в editinfo.rule && editinfo.rule.test (this.input.value) || false
} [Object.prototype.tostring.call (editinfo.rule)], _ self = this;
// Если условия не соответствуют требованиям, измените информацию
TypeOf Status! = "Boolean" && (editinfo.message = status);
if (status === true) {
this.inputtd.innerhtml = this.input.value;
this.inputtd = null;
}еще{
предупреждение (editinfo.message);
// Использовать input.focus () непосредственно под Firefox и не может быть выполнен без выполнения SetTimeout
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');
! HasClass (elem, 'thover') && addclass (lem, 'thover');
}
},
theAdout: function (e) {
var elem = e.srcelement || E.Target;
if (elem.nodename.tolowercase () === 'td' && this.closconfig.on) removeclass (lem, 'thover')
},
Dragorwidth: function (e) {
var elem = e.srcelement || e.target, widthconfig = this.widthconfig;
// выполнить перетаскивание
if (elem.nodename.tolowercase () === 'td') {
this.closconfig.td = elem.getattribute ('clos');
AddListener (документ, «MouseMove», BindaseVentListener (this, this.dragmove));
addlistener (документ, «mouseup», bind (this, this.dragup));
this.closconfig.on = true;
Sys.ie?this.head.setCapture (false): e.preventDefault ();
}
// выполнить масштабирование ширины
if (elem.nodename.tolowercase () === 'div') {
Sys.ie? (E.cancelbubble = true): e.stoppropagation ();
// Если это последний TD, Div не будет масштабирован
if (this.headtds [this.headtds.length-1] === elem.parentnode) return
Sys.ie?this.head.setCapture (false): e.preventDefault ();
widthconfig.x = e.clientx;
widthconfig.td = elem.parentnode;
widthconfig.nexttd = widthconfig.td.nextibling;
while (widthconfig.nexttd.nodename.tolowercase ()! = "td") {
widthconfig.nexttd = widthconfig.nexttd.nextibling;
};
widthconfig.tdwidth = widthconfig.td.offsetwidth;
widthconfig.nexttdwidth = widthconfig.nexttd.offsetwidth;
this.line.style.height = this.table.offsetheight +"px";
AddListener (документ, 'MouseMove', BindaseVentListener (this, this.widthmove));
addlistener (документ, «mouseup», bind (this, this.widthup));
}
},
Dragmove: function (e) {
window.getSelection? window.getSelection (). RemovealLranges (): document.selection.empty ();
setStyle (this.div, {display: "block", слева: e.clientx+9+"px", top: e.clienty+20+"px"});
},
Dragup: function () {
var closconfig = this.closconfig, rows = this.table.getelementsbytagname ('tr'), td, n, o, i = 0, l = row.length;
this.div.style.display = "none";
RemoveListener (документ, «MouseMove»);
RemoveListener (документ, «MouseUp»);
Sys.ie && this.thead.releasecapture ();
closconfig.on = false;
if (closconfig.totd === null) return;
removeClass (this.HeadTds [rolsconfig.totd], 'thover');
// Замена столбца не выполняется в том же столбце
if (closconfig.td === closconfig.totd) return;
// Проверка замена столбца
if (closconfig.td*1+1 === closconfig.totd*1) {
n = closconfig.totd;
o = closconfig.td;
}еще{
n = closconfig.td;
o = closconfig.totd;
}
for (; i <l; i ++) {
td = row [i] .getelementsbytagname ('td');
ряды [i] .insertbefore (td [n], td [o]);
}
// переопределить заголовок
for (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, left = e.clientx, clientx = слева;
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.nexttdwidth-this.minwidth) {
left = widthConfig.x + widthConfig.nexttdwidth-this.minwidth;
}
setStyle (this.line, {display: "block", слева: слева+"px"});
},
widthup: function () {
this.line.style.display = "none";
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 (документ, «MouseMove»);
RemoveListener (документ, «MouseUp»);
}
});
window.onload = function () {
Функция CheckName (val) {
if (val.replace (/^/s+$/g, '') === '') return name name не может быть пустым ';
if (val.replace (/^/s+|/s+$/, ''). Длина> 10) возвращать «длина имени не может быть больше 10 символов»;
if (!/^[/u4e00-/u9fa5a-z]+$/i.test (val)) вернуть «Имя может быть введено только на китайском или буквах»;
вернуть истину;
};
функция CheckRemark (val) {
if (val.replace (/^/s+$/g, '') === '') return 'note note ввод не может быть пустым';
if (val.Replace (/^/s+|/s+$/, ''). Длина> 15) возврат «Замечания не может быть больше 15 символов»;
if (!/^[/u4e00-/u9fa5/w/s]+$/i.test (val)) return 'Примечания могут войти только в численное число подчеркиваний';
вернуть истину;
}
var set = [
{id: 0, type: "int"},
{id: 2, type: "string", edit: {rule: checkname, message: ''}},
{id: 3, type: "date", edit: {rule:/^/d {4}/-/d {2}/-/d {2} $/, сообщение: "Дата введите 1985-02-30 в этом формате"}},, "
{id: 4, type: "string", edit: {rule: checkremark, message: ''}}
];
Новая таблица ($ ("Tab"), set);
}
</script>
</body>
</html>
Известные ошибки:
IE6 Китайский текст не обертывается автоматически
Это действительно раздражает, что буквы и цифры не обертывают их под IE.
Нажатие на браузер Chrome кажется большой проблемой, и прохождение локальных тестов будет лучше