JavaScript ใช้การจัดเรียงตารางแก้ไขลากและลดการปรับสเกล

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-04-30 09:00:04

การเรียงลำดับตารางง่ายๆ

คุณสามารถดับเบิลคลิกเพื่อแก้ไขกฎที่แก้ไขที่กำหนดเอง

คอลัมน์ที่ลากได้สำหรับการเปลี่ยนคอลัมน์

กดเส้นขอบเพื่อปรับความกว้างของคอลัมน์

การคัดลอกรหัสมีดังนี้:

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

<head>

<title> ตาราง </title>

</head>

ร่างกาย {ตัวอักษรขนาด: 12px}

#TAB {การล่มสลายของชายแดน: ล่มสลาย;}

.edit {ความสูง: 16px; ความกว้าง: 98%; พื้นหลังสี:#eff7ff; ขนาดตัวอักษร: 12px; ชายแดน: 0px;}

#tab thead td {พื้นหลัง: url (http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_t.bmp); สี:#183c94; Word-break: break-all}

#tab tbody td {overflow: hidden; break: break-all;}

#tab td {border: 1px solid #cecfce; ความสูง: 20px; สายไฟ: 20px; แนวตั้ง-แนว: กลาง; -

#tab td.tc {text-allign: center;}

.DIV {ความกว้าง: 10px; ความสูง: 6px; ชายแดน: 1px Solid #999999; พื้นหลังสี: #FFFFF; ตำแหน่ง: สัมบูรณ์; แสดง: ไม่มี;}

.line {width: 2px; พื้นหลังสี:#999999; ตำแหน่ง: สัมบูรณ์; แสดง: ไม่มี}

.dr {ความสูง: 100%; ความกว้าง: 2px; พื้นหลัง: #cecfce; ลอย: ขวา;

.r {float: ขวา;}

.l {ลอย: ซ้าย;}

#tab thead td.thover {background-image: url (http://album.hi.csdn.net/app_uploads/wtcsy/20081126/00005436.p.gif);

</style>

<body>

<head>

<tr>

<TdClass = "tc"> <pan> เลือก </span> <div> </div> </td>

<td> <pan> วันเกิด </span> <div> </div> </td>

<td> <span> หมายเหตุ </span> <div> </div> </td>

</tr>

</head>

<tbody>

<tr>

<td> Missy </td>

<td> ถ้วยทั้งหมดถ้วย </td>

</tr>

<tr>

<td> ใช่ฉันมีทักษะที่ดีใน Warcraft </td>

</tr>

<tr>

<td> วังวู </td>

<td> ใบมีดของเจ้าชายเปอร์เซียไม่เลว </td>

</tr>

<tr>

<td> ฉันชื่อ Zhao Liu </td>

</tr>

<tr>

<td> กวาดและเข้านอน </td>

</tr>

<tr>

<td> Asdorf </td>

<td> ห้องมืดของ Asdorf พร้อมไฟ </td>

</tr>

<tr>

<TD> ถ้วยมากมาย </td>

</tr>

<tr>

<td> อาหารเย็น </td>

<td> บนโต๊ะอาหารจำนวนมาก </td>

</tr>

<tr>

<td> เครื่องซักผ้า </td>

<td> เครื่องซักผ้าจำนวนมาก </td>

</tr>

<tr>

<td> ปลาหมึกเต็มไปด้วยใบหน้า </td>

<TD> 10 เกือบหนึ่งคืน </td>

</tr>

<tr>

<td> เซียลิสบราเดอร์ </td>

</tr>

</tbody>

</table>

<ภาษาสคริปต์ = "JavaScript">

(ฟังก์ชั่น (หน้าต่างที่ไม่ได้กำหนด) {

window.sys = function (ua) {

var b = {

เช่น: /msie/.test(ua) &&! /opera/.test (ua)

โอเปร่า: /opera/.test(ua),

Safari: /webkit/.test(ua) &&! /chrome/.test (ua)

Firefox: /firefox/.test(ua)

Chrome: /chrome/.test(ua)

}, vmark = "";

สำหรับ (var i ใน b) {

ถ้า (b [i]) {vmark = "safari" == i? "เวอร์ชัน": 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 ("backgroundimagecache", เท็จ, จริง);

หน้าต่าง. $ = function (id) {

ส่งคืน document.getElementById (id);

window.addListener = ฟังก์ชั่น (องค์ประกอบ, 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 (องค์ประกอบ, e, fn) {

ตัวจัดการ var = element.events [e], ประเภท;

ถ้า (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 ใน o)

E. Style [i] = o [i];

var slice = array.prototype.slice;

window.bind = ฟังก์ชั่น (วัตถุ, สนุก) {

var args = slice.call (อาร์กิวเมนต์) .slice (2);

return function () {

คืนความสนุก (วัตถุ, args);

window.bindaseventListener = function (วัตถุ, fun, args) {

var args = slice.call (อาร์กิวเมนต์) .slice (2);

ฟังก์ชั่นส่งคืน (เหตุการณ์) {

return fun.apply (วัตถุ, [event || window.event] .concat (args));

// คัดลอกจาก jq

window.extend = function () {

var target = อาร์กิวเมนต์ [0] || {}, i = 1, length = arguments.length, deep = true, ตัวเลือก;

if (typeof target === "boolean") {

ลึก = เป้าหมาย;

target = อาร์กิวเมนต์ [1] || -

i = 2;

if (typeof target! == "Object" && Object.prototype.toString.call (เป้าหมาย)! = "[ฟังก์ชันวัตถุ]")

target = {};

สำหรับ (; i <length; i ++) {

if ((ตัวเลือก = อาร์กิวเมนต์ [i])! = null)

สำหรับ (ชื่อ var ในตัวเลือก) {

var src = เป้าหมาย [ชื่อ], copy = ตัวเลือก [ชื่อ];

if (target === สำเนา)

ดำเนินการต่อ;

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

เป้าหมาย [ชื่อ] = arguments.callee (ลึก, src || (copy.length! = null? []: {}), คัดลอก);

อื่นถ้า (คัดลอก! == ไม่ได้กำหนด)

เป้าหมาย [ชื่อ] = คัดลอก;

เป้าหมายกลับ;

window.objpos = function (o) {

var x = 0, y = 0;

ทำ {x += o.offsetleft; y += o.offsettop;} ในขณะที่ ((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 (ใหม่ 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 (ใหม่ regexp ('(// s |^)'+className+'(// s | $)'), ''));

})(หน้าต่าง);

var table = คลาสใหม่ ({

ตัวเลือก: {

Minwidth: 62

เริ่มต้น: ฟังก์ชั่น (แท็บ, ชุด) {

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

totd: null

this.widthConfig = {

TD: NULL

Nexttd: null,

x: 0,

tdwidth: 0,

Nexttdwidth: 0

ขยาย (นี่คือสิ่งนี้ options);

// ฉันไม่รู้เหตุผลถ้าคุณไม่ได้ตั้งค่าคุณจะกระโดดแบบสุ่ม

(sys.ie6 || sys.chrome) && (tab.width = tab.offsetWidth)

// บันทึกช่องทำเครื่องหมายเหล่านั้นเลือกวิทยุ IE6 จะไม่จำสถานะเหล่านี้เมื่อทำการดำเนินการ DOM

ถ้า (sys.ie6) {

this.checkbox = {};

ช่องทำเครื่องหมาย var = tab.getElementsByTagname ('อินพุต'), i = 0, l = ช่องทำเครื่องหมายความยาว;

สำหรับ (; i <l; i ++)

(ช่องทำเครื่องหมาย [i] .type == "ช่องทำเครื่องหมาย" || ช่องทำเครื่องหมาย [i] .type == "วิทยุ") &&

addListener (ช่องทำเครื่องหมาย [i], "คลิก", ผูก (นี้, ฟังก์ชั่น (elm, i) {

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

}, ช่องทำเครื่องหมาย [i], i));

var i = 0, l = set.length, rows = tab.tbodies [0] .rows, d = เอกสาร, tabtads = tab.getElementSbyTagname ('td'), ความยาว = this.theadtds.length;

// อินพุตที่ใช้สำหรับการแก้ไข

this.input = d.createElement ('อินพุต');

this.input.type = "text";

this.input.className = 'แก้ไข';

// ใช้เพื่อแสดง Diving Div

this.div = d.body.appendchild (d.createelement ('div'));

this.div.className = "div";

// เส้นแนวตั้งที่แสดงเมื่อซูม

this.line = d.body.appendchild (d.createlement ('div'));

this.line.className = 'line';

this.line.style.top = objpos (แท็บ) .y +"px";

// เดินทางชุดเพื่อทำการตั้งค่าบางอย่าง

สำหรับ (; i <l; i ++) {

// ผูกเหตุการณ์ headhunter ที่ต้องจัดเรียง

addListener (this.headtds [set [i] .id], 'คลิก', bind (this, this.sorttable, this.headtds [set [i] .id], set [i] .ype));

// กำหนดค่าการกำหนดค่าที่ต้องการสำหรับคอลัมน์ไปยังตารางที่ต้องแก้ไข

ตั้งค่า [i] .edit && (this.editconfig [set [i] .id] = {กฎ: set [i] .edit.rule, ข้อความ: set [i] .edit.message});

// ใส่ TR ทั้งหมดลงในอาร์เรย์สำหรับการเรียงลำดับ

สำหรับ (i = 0, l = rows.length; i <l; i ++)

นี่คือ [i] = แถว [i];

// เดินทางผ่าน TD ทั้งหมดและทำการตั้งค่าบางอย่าง

สำหรับ (i = 0, l = tabtads.length; i <l; i ++) {

// เมื่อใช้ TD บนหัวคุณควรใช้เมื่อลากด้วยเครื่องหมาย

ฉัน <ความยาว && tabtads [i] .setAttribute ('ปิด', i);

// เพิ่มแอตทริบิวต์แก้ไขไปยัง TD ที่ต้องแก้ไข

i> = ความยาว && this.editConfig [i%ความยาว] && tabtads [i] .setAttribute ('แก้ไข', ความยาว i%);

// การดำเนินการลากและซูมที่มีผลผูกพัน

addListener (this.tead, 'mousedown', bindaseventListener (นี่, this.dragorwidth));

// เมื่อลากบันทึกจะย้ายไปยังคอลัมน์ TD นั้น

AddListener (this.tead, 'Mouseover', bindaseventListener (นี่, this.theadhover));

//ดี

addListener (this.tead, 'mouseout', bindaseventListener (นี่, สิ่งนี้. teadout));

// เหตุการณ์การแก้ไขที่มีผลผูกพันกำหนดตารางใดที่แก้ไขตาม E.Srelement หรือ e.target

addListener (แท็บ, 'dblclick', bindaseventListener (นี่, this.edit));

// บันทึกเนื้อหาที่แก้ไขเมื่อออกจากอินพุต

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

SortTable: ฟังก์ชั่น (td, type) {// td เป็นองค์ประกอบ n ที่คลิก คอลัมน์ใดเป็นประเภทการเรียงลำดับ การเรียงลำดับประเภทใด

var fragment = document.createdocumentFragment (), span = td.getElementByTagname ('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'), ประเภท));

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);

ถ้า (sys.ie6) {

สำหรับ (var s ใน this.checkbox)

this.checkbox [s]. ตรวจสอบ = true;

this.sortcol = td; // บันทึกคอลัมน์ใดที่เรียงลำดับ

เปรียบเทียบ: ฟังก์ชัน (n, type) {

ฟังก์ชั่น return (a1, a2) {

var Convert = {

int: function (v) {return parseint (v)}

ลอย: ฟังก์ชั่น (v) {return parsefloat (v)}

วันที่: ฟังก์ชั่น (v) {return v.toString ()}

สตริง: ฟังก์ชัน (v) {return v.toString ()}

! แปลง [type] && (แปลง [type] = function (v) {return v.toString ()});

a1 = แปลง [type] (a1.cells [n] .innerhtml);

a2 = แปลง [type] (a2.cells [n] .innerhtml);

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

แก้ไข: ฟังก์ชั่น (e) {

var elem = this.inputtd = e.srelement || E.Target;

if (! elem.getAttribute ('แก้ไข')) กลับ;

this.input.value = elem.innerhtml;

elem.innerhtml = "";

Elem.AppendChild (this.input);

this.input.focus ();

บันทึก: ฟังก์ชั่น (elem) {

var editinfo = this.editConfig [elem.parentNode.getAttribute ('แก้ไข')], สถานะ = {

"[ฟังก์ชั่นวัตถุ]": 'ความยาว' ใน 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! = "Boolean" && (editInfo.Message = สถานะ);

if (สถานะ === true) {

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

this.inputtd = null;

}อื่น{

การแจ้งเตือน (editinfo.message);

// ใช้ input.focus () โดยตรงภายใต้ firefox และไม่สามารถดำเนินการได้โดยไม่ต้องดำเนินการ settimeout

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

TheaDhover: ฟังก์ชั่น (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: ฟังก์ชั่น (e) {

var elem = e.srcelement || E.Target;

if (elem.nodename.toLowerCase () === 'td' && this.closconfig.on) RemoveClass (elem, 'thover')

DragorWidth: ฟังก์ชั่น (e) {

var elem = e.srcelement || E.Target, WidthConfig = this.widthconfig;

// ดำเนินการลากและวาง

if (elem.nodename.toLowerCase () === 'td') {

this.closconfig.td = elem.getAttribute ('clos');

AddListener (เอกสาร, 'Mousemove', BindaseventListener (นี่คือสิ่งนี้ Dragmove));

addListener (เอกสาร, 'mouseup', bind (this, this.dragup));

this.closconfig.on = true;

sys.ie?his.head.setcapture (เท็จ): 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) ส่งคืน

sys.ie?his.head.setcapture (เท็จ): e.preventdefault ();

WidthConfig.x = e.clientx;

WidthConfig.td = elem.parentNode;

WidthConfig.nexttd = widthconfig.td.nextsibling;

ในขณะที่ (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 (เอกสาร, 'Mousemove', BindaseventListener (นี่คือสิ่งนี้ widthmove));

addListener (เอกสาร, 'mouseup', bind (นี่, this.widthup));

dragmove: ฟังก์ชัน (e) {

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

setStyle (this.div, {display: "block", ซ้าย: e.clientx+9+"px", ด้านบน: 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 = "ไม่มี";

RemoveListener (เอกสาร, 'Mousemove');

RemoveListener (เอกสาร, 'Mouseup');

sys.ie && this.thead.releasecapture ();

ClostConfig.on = FALSE;

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

RemoveClass (this.headtds [closconfig.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;

สำหรับ (; i <l; i ++) {

td = rows [i] .getElementsByTagname ('td');

แถว [i] .insertbefore (td [n], td [o]);

// reidentify ส่วนหัว

สำหรับ (i = 0, l = this.headtds.length; i <l; i ++)

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

closconfig.totd = closconfig.td = null;

WidthMove: ฟังก์ชั่น (e) {

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

var widthconfig = this.widthconfig, x = e.clientx - widthconfig.x, ซ้าย = e.clientx, clientx = ซ้าย;

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

ซ้าย = widthconfig.x - widthconfig.tdwidth+this.minwidth;

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

ซ้าย = widthconfig.x + widthconfig.nexttdwidth-his.minwidth;

setStyle (this.line, {display: "block", ซ้าย: ซ้าย+"px"});

Widthup: function () {

this.line.style.display = "ไม่มี";

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, '') === '') ส่งคืน 'ชื่ออินพุตไม่สามารถว่างเปล่า';

if (val.replace (/^/s+|/s+$/, ''). ความยาว> 10) ส่งคืน 'ความยาวของชื่อไม่เกิน 10 อักขระ';

if (!/^[/u4e00-/u9fa5a-z]+$/i.test (val)) ส่งคืน 'ชื่อสามารถป้อนเป็นภาษาจีนหรือตัวอักษรเท่านั้น';

กลับมาจริง;

ฟังก์ชั่น checkremark (val) {

if (val.replace (/^/s+$/g, '') === '') ส่งคืน 'หมายเหตุอินพุตไม่สามารถว่างเปล่า';

if (val.replace (/^/s+|/s+$/, ''). ความยาว> 15) ความยาวหมายเหตุ 'ความยาวไม่เกิน 15 อักขระ';

if (!/^[/u4e00-/u9fa5/w/s]+$/i.test (val)) หมายเหตุ 'สามารถป้อนพื้นที่ขีดล่างตัวเลขจีนเท่านั้น';

กลับมาจริง;

var set = [

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

{id: 2, type: "string", แก้ไข: {กฎ: checkName, ข้อความ: ''}},

{id: 3, ประเภท: "วันที่", แก้ไข: {กฎ:/^/d {4}/-/d {2}/-/d {2} $/, ข้อความ: "ป้อนวันที่ 1985-02-30 ในรูปแบบนี้"}},

{id: 4, type: "string", แก้ไข: {กฎ: checkRemark, ข้อความ: ''}}

ตารางใหม่ ($ ("แท็บ"), set);

</script>

</body>

</html>

ข้อบกพร่องที่รู้จัก:

IE6 ข้อความภาษาจีนไม่ได้ห่อโดยอัตโนมัติ

มันน่ารำคาญจริงๆที่ตัวอักษรและตัวเลขไม่ได้ห่อไว้โดยอัตโนมัติภายใต้ IE

การคลิกที่เบราว์เซอร์ Chrome ดูเหมือนจะเป็นปัญหาใหญ่และการทดสอบในท้องถิ่นจะดีขึ้น