Penyortiran meja sederhana
Anda dapat mengklik dua kali untuk mengedit aturan yang diedit khusus
Kolom yang Dapat Diberikan untuk Penggantian Kolom
Dorong perbatasan untuk skala lebar kolom
Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten-tipe" content = "text /html; charset = gb2312" />
<title> tabel </iteme>
</head>
<type style = "text/css">
Body {font-size: 12px}
#tab {border-collapse: collapse;}
.dit {tinggi: 16px; Lebar: 98%; latar belakang-warna:#eff7ff; font-size: 12px; Perbatasan: 0px;}
#tab itu td {latar belakang: url (http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_t.bmp); warna:#183c94; Word-Break: break-all}
#tab tbody td {overflow: hidden; word-break: break-all;}
#tab td {border: 1px solid #cecfce; tinggi: 20px; line-height: 20px; vertikal-align: tengah; }
#tab td.tc {text-align: center;}
.div {lebar: 10px; tinggi: 6px; Perbatasan: 1px Solid #999999; Latar Belakang-Color: #FFFFF; Posisi: Absolute; Tampilan: Tidak Ada;}
.line {lebar: 2px; Latar Belakang-Color:#999999; Posisi: Absolute; Tampilan: Tidak Ada}
.dr {height: 100%; lebar: 2px; latar belakang: #cecfce; float: kanan; margin-kanan: -1px; kursor: sw-resize}
.r {float: right;}
.l {float: left;}
#tab itu td.thover {latar belakang-image: url (http://album.hi.csdn.net/app_uploads/wtcsy/20081126/000054336.p.gif); latar belakang-repeat: ulangi-x;}
</tyle>
<body>
<tabel id = "tab" cellPacing = "1" cellPadding = "0">
<head>
<tr>
<tdclass = "tc"> <span> ID </span> <div> </div> </td>
<tdclass = "tc"> <span> SELECT </span> <div> </div> </td>
<td> <span> name </span> <div> </div> </td>
<td> <span> ulang tahun </span> <div> </div> </td>
<td> <span> Keterangan </span> <div> </div> </td>
</tr>
</head>
<tbody>
<tr>
<td> 1 </td>
<td> <input type = "centang kotak"> <input name = "ss" type = "radio" /> </td>
<td> Missy </td>
<td> 1982-05-27 </td>
<td> cangkir, semua cangkir </td>
</tr>
<tr>
<td> 3 </td>
<td> <input type = "centang kotak"> <input name = "ss" type = "radio" /> </td>
<td> li si </td>
<td> 1983-06-27 </td>
<td> ya, saya memiliki keterampilan yang baik dalam warcraft </td>
</tr>
<tr>
<td> 2 </td>
<td> <input type = "centang kotak"> <input name = "ss" type = "radio" /> </td>
<td> wang wu </td>
<td> 1987-05-27 </td>
<td> Pisau pangeran Persia tidak buruk </td>
</tr>
<tr>
<td> 4 </td>
<td> <input type = "centang kotak"> <input name = "ss" type = "radio" /> </td>
<td> zhao liu </td>
<td> 1988-05-27 </td>
<td> Nama saya Zhao Liu </td>
</tr>
<tr>
<td> 5 </td>
<td> <input type = "centang kotak"> <input name = "ss" type = "radio" /> </td>
<td> zhu ba </td>
<td> 1984-05-27 </td>
<td> sapu dan pergi ke tempat tidur </td>
</tr>
<tr>
<td> 6 </td>
<td> <input type = "centang kotak"> <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 = "centang kotak"> <input name = "ss" type = "radio" /> </td>
<td> cup </td>
<td> 1984-06-27 </td>
<td> Banyak cangkir </td>
</tr>
<tr>
<td> 8 </td>
<td> <input type = "centang kotak"> <input name = "ss" type = "radio" /> </td>
<td> perangkat makan </td>
<td> 1984-02-27 </td>
<td> Banyak peralatan makan </td>
</tr>
<tr>
<td> 8 </td>
<td> <input type = "centang kotak"> <input name = "ss" type = "radio" /> </td>
<td> Peralatan cuci </td>
<td> 1984-08-27 </td>
<td> Banyak peralatan cuci </td>
</tr>
<tr>
<td> 9 </td>
<td> <input type = "centang kotak"> <input name = "ss" type = "radio" /> </td>
<td> cumi -cumi penuh dengan wajah </td>
<td> 1984-12-27 </td>
<td> 10 hampir satu malam </td>
</tr>
<tr>
<td> 10 </td>
<td> <input type = "centang kotak"> <input name = "ss" type = "radio" /> </td>
<td> cialis brother </td>
<td> 1984-12-21 </td>
<td> hehe </td>
</tr>
</tbody>
</boable>
<bahasa skrip = "javascript">
(fungsi (jendela, tidak terdefinisi) {
window.sys = function (ua) {
var b = {
yaitu: /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 = "";
untuk (var i in b) {
if (b [i]) {vmark = "safari" == i? "Versi": i; merusak; }
}
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;
kembali b;
} (window.navigator.useragent.tolowercase ());
window.sys.ie6 && document.execCommand ("latar belakangImagecache", false, true);
jendela. $ = function (id) {
return document.getElementById (id);
};
window.addlistener = function (elemen, 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 (elemen, e, fn) {
var handlers = element.events [e], type;
if (fn) {
untuk (ketik penangan)
if (handlers [type] === fn) {
element.removeeventlistener? element.removeeventlistener (e, fn, false): element.detachevent ("on" + e, fn);
Hapus penangan [tipe];
}
}kalau tidak{
untuk (ketik penangan) {
element.removeeventlistener? element.removeeventlistener (e, penangan [type], false): element.detachevent ("on" + e, penangan [type]);
Hapus penangan [tipe];
}
}
};
window.setstyle = function (e, o) {
if (typeof o == "string")
e.style.csstext = o;
kalau tidak
untuk (var i di o)
E.Style [i] = o [i];
};
var slice = array.prototype.slice;
window.bind = function (objek, menyenangkan) {
var args = slice.call (argumen) .slice (2);
return function () {
return fun.apply (objek, args);
};
};
window.bindaseventListener = function (objek, fun, args) {
var args = slice.call (argumen) .slice (2);
return function (event) {
return fun.apply (objek, [event || window.event] .concat (args));
}
};
// Salin dari JQ
window.extend = function () {
var target = argumen [0] || {}, i = 1, panjang = argumen.length, deep = true, opsi;
if (typeOf target === "boolean") {
Deep = Target;
target = argumen [1] || {};
i = 2;
}
if (typeOf target! == "objek" && object.prototype.toString.call (target)! = "[fungsi objek]")
target = {};
untuk (; i <panjang; i ++) {
if ((options = argumen [i])! = null)
untuk (nama var di opsi) {
var src = target [name], copy = options [name];
if (target === salin)
melanjutkan;
if (deep && copy && typeof copy === "objek" &&! copy.nodetype) {
target [name] = arguments.callee (Deep, src || (copy.length! = null? []: {}), copy);
}
lain jika (salin! == tidak ditentukan)
target [name] = copy;
}
}
target pengembalian;
};
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 (properti) {
var _class = function () {return (argumen [0]! == null && this.initialize && typeof (this.initialize) == 'function')? this.initialize.apply (ini, argumen): ini;};
_class.prototype = properti;
mengembalikan _class;
};
window.hasclass = function (elemen, classname) {
return element.classname.match (regexp baru ('(// s |^)'+classname+'(// s | $)'));
};
window.addclass = function (elemen, classname) {
! this.hasclass (elemen, classname) && (element.classname += "" +className);
}
window.removeclass = function (elemen, classname) {
hasclass (elemen, classname) && (element.classname = element.classname.replace (regexp baru ('(// s |^)'+classname+'(// s | $)'), ''));
}
})(jendela);
var table = kelas baru ({
Opsi: {
Minwidth: 62
},
inisialisasi: function (tab, set) {
this.table = tab;
this.rows = []; // Catat semua referensi TR di dalamnya
this.sortcol = null; // Catat kolom mana yang menyortir
this.inputtd = null; // Catat TD mana yang sedang diedit
this.editconfig = {}; // aturan dan tips untuk mengedit tabel
this.tead = tab.getElementsbyTagname ('head') [0];
this.headtds = tab.getElementsByTagname ('head') [0] .geteLementsByTagname ('td'); // Koleksi DOM yang umum digunakan dapat direferensikan dengan properti.
this.tbodytds = tab.getElementsByTagname ('tbody') [0] .getElementsbyTagname ('td');
this.closconfig = {
pada: false,
TD: NULL,
TOTD: NULL
};
this.widthconfig = {
TD: NULL,
NextTD: NULL,
x: 0,
tdwidth: 0,
nexttdwidth: 0
};
Memperluas (ini, ini.Options);
// Saya tidak tahu alasannya, jika Anda tidak mengaturnya, Anda akan melompat secara acak
(Sys.ie6 || sys.chrome) && (tab.width = tab.offsetWidth)
// Rekam kotak centang itu, radio dipilih. IE6 tidak akan mengingat negara -negara ini saat melakukan operasi DOM.
if (sys.ie6) {
this.checkbox = {};
var centang kotak = tab.getElementsbyTagname ('input'), i = 0, l = centang kotak.
untuk (; i <l; i ++)
(kotak centang [i] .type == "kotak centang" || kotak centang [i] .type == "radio") &&
addListener (kotak centang [i], "klik", bind (ini, fungsi (elm, i) {
elm.checked == true? (this.checkbox [i] = elm) :( hapus this.checkbox [i]);
}, kotak centang [i], i));
};
var i = 0, l = set.length, rows = tab.tbodies [0] .rows, d = document, tabtads = tab.getElementsbyTagname ('td'), length = this.theadtds.length;
// input yang digunakan untuk mengedit
this.input = d.createElement ('input');
this.input.type = "text";
this.input.className = 'Edit';
// Digunakan untuk menampilkan div seret
this.div = D.Body.AppendChild (D.Createelement ('Div'));
this.div.classname = "div";
// Garis vertikal ditampilkan saat memperbesar
this.line = D.Body.AppendChild (D.Createelement ('Div'));
this.line.classname = 'line';
this.line.style.top = objpos (tab) .y +"px";
// bepergian ke set untuk membuat beberapa pengaturan
untuk (; i <l; i ++) {
// ikat acara headhunter yang perlu disortir
addlistener (this.headtds [set [i] .id], 'klik', bind (ini, this.sorttable, this.headtds [set [i] .id], atur [i] .type));
// Tentukan konfigurasi yang diperlukan untuk kolom ke tabel yang perlu diedit
atur [i] .edit && (this.editconfig [set [i] .id] = {aturan: atur [i] .edit.rule, pesan: atur [i] .dit.message});
}
// Masukkan semua TR ke dalam array untuk disortir
untuk (i = 0, l = baris.length; i <l; i ++)
this.rows [i] = baris [i];
// bepergian melalui semua TD dan buat beberapa pengaturan
untuk (i = 0, l = tabtads.length; i <l; i ++) {
// Saat menggunakan TD di kepala, Anda harus menggunakannya saat menyeretnya dengan tanda.
i <panjang && tabtads [i] .setAttribute ('clos', i);
// Tambahkan Atribut Edit ke TD yang perlu diedit
i> = length && this.editconfig [i%length] && tabtads [i] .setAttribute ('Edit', i%length);
}
// Operasi Drag dan Zoom yang Mengikat
addListener (this.tead, 'mousedown', bindaseventlistener (this, this.dragorwidth));
// Saat menyeret, catatan bergerak ke kolom TD itu
addListener (this.tead, 'mouseover', bindaseventListener (this, this.theadhover));
//Sehat
addListener (this.tead, 'mouseout', bindaseventListener (this, this.teadout));
// acara pengeditan mengikat menentukan tabel mana yang diedit berdasarkan e.srcelement atau e.target
addListener (tab, 'dblClick', bindaseventListener (this, this.edit));
// Simpan konten yang dimodifikasi saat meninggalkan input
addListener (this.input, 'blur', bind (this, this.save, this.input));
},
sortrtable: function (td, type) {// td adalah elemen n yang diklik. Kolom mana yang merupakan jenis penyortiran. Jenis apa yang merupakan penyortiran.
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) == "↓"? "↑": "↓");
}kalau tidak{
this.rows.sort (ini.
span.innerhtml = span.innerHtml + "↑";
This.sortcol! = null && (this.sortcol.geteLementsbyTagname ('span') [0] .innerhtml = this.sortcol.getElementsbyTagname ('span') [0] .innerHtml.replace (/.$/, '');////hapus kolom sebelumnya (/.$.$/,');////hapus kolom sebelumnya dari Kolom (/.$.
};
untuk (var i = 0, l = this.rows.length; i <l; i ++)
frag.AppendChild (this.rows [i]);
this.table.tbodies [0] .AppendChild (frag);
if (sys.ie6) {
untuk (var s in this.checkbox)
this.checkbox [S] .Checked = true;
}
this.sortcol = td; // Catat kolom mana yang menyortir
},
Bandingkan: function (n, type) {
fungsi pengembalian (a1, a2) {
var convert = {
int: function (v) {return parseInt (v)},
float: function (v) {return parsefloat (v)},
Tanggal: function (v) {return v.toString ()},
String: function (v) {return v.toString ()}
};
! Convert [type] && (convert [type] = function (v) {return v.toString ()});
a1 = konversi [type] (a1.cells [n] .innerhtml);
a2 = konversi [type] (a2.cells [n] .innerhtml);
return a1 == a2? 0: a1 <a2? -1: 1;
};
},
Edit: 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 ();
},
save: function (elem) {
var editInfo = this.EditConfig [elem.parentnode.getAttribute ('Edit')], status = {
"[Fungsi objek]": 'panjang' di editInfo.rule && editInfo.rule (this.input.value) || false,
"[Object RegExp]": 'Test' di editInfo.rule && editInfo.rule.test (this.input.value) || false
} [Object.prototype.toString.call (EditInfo.rule)], _ self = this;
// Jika kondisinya tidak memenuhi persyaratan, modifikasi informasi prompt
TipeOf Status! = "Boolean" && (EditInfo.Message = Status);
if (status === true) {
this.inputtd.innerHtml = this.input.value;
this.inputtd = null;
}kalau tidak{
peringatan (editinfo.message);
// Gunakan input.focus () langsung di bawah Firefox dan tidak dapat dieksekusi tanpa menjalankan 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 (elem, 'thover');
}
},
Theadout: function (e) {
var elem = e.srcelement || E.Target;
if (elem.nodename.tolowercase () === 'td' && this.closconfig.on) Removeclass (elem, 'thover')
},
DragorWidth: function (e) {
var elem = e.srcelement || e.target, widthconfig = this.widthconfig;
// Jalankan drag dan lepas
if (elem.nodename.tolowercase () === 'td') {
this.closconfig.td = elem.getAttribute ('clos');
addListener (dokumen, 'mousemove', bindaseventlistener (this, this.dragmove));
addListener (dokumen, 'mouseup', bind (this, this.dragup));
this.closconfig.on = true;
Sys.ie?this.head.setCapture (false): e.preventdefault ();
}
// Lakukan penskalaan lebar
if (elem.nodename.tolowercase () === 'div') {
Sys.ie? (E.CancelBubble = true): e.Stoppropagation ();
// Jika itu adalah TD terakhir, div tidak akan diskalakan
if (this.headtds [this.headtds.length-1] === elem.parentnode) kembali
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.nexttd.offsetWidth;
this.line.style.height = this.table.offsetheight +"px";
addListener (dokumen, 'mousemove', bindaseventlistener (this, this.widthmove));
addListener (dokumen, 'mouseup', bind (this, this.widthup));
}
},
dragmove: function (e) {
window.getSelection? window.getSelection (). RemoveAllranges (): document.selection.empty ();
setStyle (this.div, {display: "block", kiri: e.clientx+9+"px", atas: e.clienty+20+"px"});
},
dragup: function () {
var closconfig = this.closconfig, baris = this.table.geteLementsbyTagname ('tr'), td, n, o, i = 0, l = baris.length;
this.div.style.display = "none";
Removelistener (dokumen, 'mousemove');
Removelistener (dokumen, 'mouseUp');
Sys.ie && this.thead.releasecapture ();
closconfig.on = false;
if (closconfig.totd === null) kembali;
removeclass (this.headtds [closconfig.totd], 'thover');
// Tidak ada penggantian kolom yang dilakukan di kolom yang sama
if (closconfig.td === closconfig.totd) return;
// Periksa penggantian kolom
if (closconfig.td*1+1 === closconfig.totd*1) {
n = closconfig.totd;
o = closconfig.td;
}kalau tidak{
n = closconfig.td;
o = closconfig.totd;
}
untuk (; i <l; i ++) {
td = baris [i] .getElementsbyTagname ('td');
baris [i] .insertbefore (td [n], td [o]);
}
// Identifikasi ulang header
untuk (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, kiri = e.clientx, clientx = kiri;
if (clientx <widthconfig.x && widthconfig.x - clientx> widthconfig.tdwidth-this.minwidth) {
kiri = widthconfig.x - widthconfig.tdwidth+this.minwidth;
}
if (clientx> widthconfig.x && clientx - widthconfig.x> widthconfig.nexttdwidth-this.minwidth) {
kiri = widthconfig.x + widthconfig.nexttdwidth- this.minwidth;
}
setStyle (this.line, {display: "block", kiri: kiri+"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 (dokumen, 'mousemove');
Removelistener (dokumen, 'mouseUp');
}
});
window.onload = function () {
function checkName (val) {
if (val.replace (/^/s+$/g, '') === '') Return 'Name Input tidak dapat kosong';
if (val.replace (/^/s+|/s+$/, ''). Panjang> 10) mengembalikan 'panjang nama tidak dapat lebih besar dari 10 karakter';
if (!/^[/u4e00-/u9fa5a-z]+$/i.test (val)) mengembalikan 'nama hanya dapat dimasukkan dalam bahasa Cina atau surat';
Kembali Benar;
};
function checkremark (val) {
if (val.replace (/^/s+$/g, '') === '') return 'note input tidak dapat kosong';
if (val.replace (/^/s+|/s+$/, ''). Panjang> 15) Panjang kembali 'tidak dapat lebih besar dari 15 karakter';
if (!/^[/u4e00-/u9fa5/w/s]+$/i.test (val)) kembali 'Catatan hanya dapat memasukkan ruang bawah numerik Cina';
Kembali Benar;
}
var set = [
{id: 0, ketik: "int"},
{id: 2, type: "string", edit: {aturan: checkname, pesan: ''}},
{id: 3, type: "date", edit: {aturan:/^/d {4}/-/d {2}/-/d {2} $/, pesan: "Masukkan tanggal 1985-02-30 dalam format ini"}},
{id: 4, type: "string", edit: {aturan: checkremark, pesan: ''}}
];
tabel baru ($ ("tab"), set);
}
</script>
</body>
</html>
Bug yang Dikenal:
IE6 Teks Cina tidak secara otomatis membungkus
Sangat mengganggu bahwa huruf dan angka tidak secara otomatis membungkusnya di bawah IE.
Mengklik pada browser Chrome tampaknya menjadi masalah besar dan mendapatkan tes lokal akan lebih baik