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>

<스타일 유형 = "텍스트/CSS">

바디 {font-size : 12px}

#tab {Border-Collapse : Collapse;}

.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 {오버 플로우 : 숨겨진; 단어 브레이크 : break-all;}

#TAB TD {테두리 : 1px Solid #cecfce; 높이 : 20px; 선-높이 : 20px; 수직-정상 : 중간; }

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

.div {너비 : 10px; 높이 : 6px; 국경 : 1px Solid #999999; 배경색 : #fffff; 위치 : 절대; 디스플레이 : 없음;}

.line {너비 : 2px; 배경색 :#999999; 위치 : 절대; 디스플레이 : 없음}

.dr {높이 : 100%; 너비 : 2px; 배경 : #cecfce; float : 오른쪽; 마진 오른쪽 : -1px; 커서 : SW-Resize}

.r {float : Right;}

.l {float : 왼쪽;}

#TAB THEAD TD.THOVER {BACKERTE-IMAGE : URL (http://album.hi.csdn.net/app_uploads/wtcsy/20081126/000054336.p.gif); Back

</스타일>

<body>

<헤드>

<tr>

</tr>

</head>

<tbody>

<tr>

</tr>

<tr>

<td> 예, 워크래프트에 좋은 기술이 있습니다 </td>

</tr>

<tr>

</tr>

<tr>

<td> 내 이름은 Zhao Liu </td>입니다

</tr>

<tr>

</tr>

<tr>

<td> asdorf </td>

<td> 조명이있는 어두운 방 </td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td> cialis brother </td>

</tr>

</tbody>

</테이블>

(함수 (창, 정의되지 않은) {

window.sys = function (ua) {

var b = {

IE : /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 = "";

for (b in b in b) {

if (b [i]) {vmark = "safari"== i? "버전": i; 부서지다; }

}

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;

반환 b;

} (window.navigator.useragent.tolowercase ());

Window.sys.ie6 && document.execcommand ( "backgroundimagecache", false, true);

창. $ = 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 핸들러 = Element.Events [e], 유형;

if (fn) {

for (핸들러 입력)

if (핸들러 [type] === fn) {

요소 .removeEventListener? element.removeEventListener (e, fn, false) : element.detachevent ( "on" + e, fn);

핸들러 삭제 [유형];

}

}또 다른{

for (핸들러 입력) {

요소 .removeEventListener? element.removeEventListener (e, 핸들러 [type], false) : element.detacheVent ( "on" + e, 핸들러 [type]);

핸들러 삭제 [유형];

}

};

window.setstyle = function (e, o) {

if (typeof o == "string")

e.style.csstext = O;

또 다른

for (var i in o)

E. 스타일 [i] = o [i];

};

var slice = array.prototype.slice;

window.bind = 함수 (객체, 재미) {

var args = slice.call (인수) .slice (2);

return function () {

return fun.apply (Object, Args);

};

Window.bindaseventListener = 함수 (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") {

딥 = 대상;

대상 = 인수 [1] || {};

i = 2;

}

if (taptions tarting! == "object"&& 객체 .prototype.tostring.call (target)! = "[객체 함수]")

대상 = {};

for (; i <length; i ++) {

if ((옵션 = 인수 [i])! = null)

for (옵션의 var name) {

var src = target [name], copy = 옵션 [이름];

if (target === Copy)

계속하다;

if (deep && copy && typeof copy === "object"&&! copy.nodetype) {

대상 [name] = arguments.callee (deep, src || (copy.length! = null? [] : {}), copy);

}

else if (copy! == 정의되지 않은)

대상 [이름] = 복사;

}

반환 대상;

};

window.objpos = function (o) {

var x = 0, y = 0;

do {x += O.OffSetLeft; y += O.OffSetTop;} while (((O = O.OffSetParent));

반환 { 'x': x, 'y': y};

}

window.class = function (속성) {

var _class = function () {return (arguments [0]! == null && this.initialize && typeof (this.initialize) == 'function')? this.initialize.apply (this, arguments) : this;};

_class.prototype = 속성;

반환 _class;

};

window.hasclass = function (요소, className) {

return emplic.classname.match (새 regexp ( '(// s |^)'+className+'(// s | $)');

};

window.addclass = function (요소, className) {

! this.hasclass (요소, className) && (element.className += "" +className);

}

window.removeClass = function (요소, className) {

hasclass (element, classname) && (element.classname = emeter.classname.replace (새 regexp ( '(// s |^)'+classname+'(// s | $)', ''));

}

})(창문);

var 테이블 = 새로운 클래스 ({

옵션 : {

Minwidth : 62

초기화 : 함수 (탭, 세트) {

this.table = 탭;

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 = {

on : false,

TD : NULL,

TOTD : NULL

};

this.widthConfig = {

TD : NULL,

Nexttd : Null,

x : 0,

tdwidth : 0,

Nexttdwidth : 0

};

확장 (this, this.options);

// 이유를 모르겠습니다. 설정하지 않으면 무작위로 점프합니다.

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

// 해당 확인란을 기록하고 라디오가 선택됩니다. IE6은 DOM 운영을 수행 할 때 이러한 상태를 기억하지 못할 것입니다.

if (sys.ie6) {

this.checkbox = {};

var checkboxs = tab.getElementsByTagName ( 'input'), i = 0, l = checkboxs.length;

for (; i <l; i ++)

(CheckBoxs [i] .type == "checkbox"|| checkboxs [i] .type == "radio") &&

AddListener (CheckBoxs [i], "click", bind (this, function (elm, i) {

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

}, CheckBoxs [i], i));

};

var i = 0, l = set.length, rows = tab.tbodies [0] .rows, d = document, tabtads = tab.getElementsByTagName ( 'td'), 길이 = this.theadtds.length;

// 편집에 사용되는 입력

this.input = d.createElement ( '입력');

this.input.type = "텍스트";

this.input.classname = 'edit';

// 드래그 DIV를 표시하는 데 사용됩니다

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 (탭) .y +"px";

// 세트를 이동하여 일부 설정을 만듭니다

for (; i <l; i ++) {

// 정렬 해야하는 헤드 헌터 이벤트를 바인딩합니다

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] = {규칙 : set [i] .edit.rule, 메시지 : set [i] .edit.message});

}

// 정렬을 위해 모든 TR을 배열에 넣습니다

for (i = 0, l = rows.length; i <l; i ++)

this.rows [i] = 행 [i];

// 모든 TD를 통해 이동하여 일부 설정을 만듭니다

for (i = 0, l = tabtads.length; i <l; i ++) {

// 헤드에서 TD를 사용할 때 마크로 드래그 할 때 사용해야합니다.

i <longth && tabtads [i] .setattribute ( 'clos', i);

// 편집 해야하는 TD에 편집 속성 추가

i> = length && this.editconfig [i%길이] && tabtads [i] .setattribute ( 'edit', i%length);

}

// 드래그 및 줌 작업을 바인딩합니다

AddListener (this.tead, 'mousedown', bindaseventlistener (this, this.dragorwidth));

// 드래그 할 때 레코드가 해당 열 TD로 이동합니다

AddListener (this.tead, 'mouseover', bindaseventListener (this, this.theadhover));

//잘

AddListener (this.tead, 'mouseout', bindaseventListener (this, this.teadout));

// 바인딩 편집 이벤트 e.srcelement 또는 e.target에 따라 편집 된 테이블이 결정됩니다.

AddListener (탭, '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 (/.$/

};

for (var i = 0, l = this.rows.length; i <l; i ++)

Frag.appendChild (this.rows [i]);

this.table.tbodies [0]. AppendChild (Frag);

if (sys.ie6) {

for (var s in this.checkbox)

this.checkbox [s] .checked = true;

}

this.sortcol = td; // 어떤 열이 정렬되는지 기록합니다

비교 : 함수 (n, type) {

반환 함수 (a1, a2) {

var convert = {

int : 함수 (v) {return parseint (v)},

float : function (v) {return parsefloat (v)},

날짜 : function (v) {return v.toString ()},

문자열 : 함수 (v) {return v.toString ()}

};

! convert [type] && (convert [type] = function (v) {return v.toString ()});

a1 = convert [type] (a1.cells [n] .innerhtml);

a2 = convert [type] (a2.cells [n] .innerhtml);

반환 a1 == a2? 0 : a1 <a2? -1 : 1;

};

편집 : 함수 (e) {

var elem = this.inputtd = e.srcelement || e.target;

if (! elem.getAttribute ( 'edit')) 리턴;

this.input.value = elem.innerhtml;

elem.innerhtml = "";

Elem.appendChild (this.input);

this.input.focus ();

저장 : 기능 (elem) {

var editinfo = this.editConfig [elem.parentNode.getAttribute ( 'edit')], status = {

"[객체 함수]": 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;

// 조건이 요구 사항을 충족하지 않으면 프롬프트 정보를 수정하십시오.

status의 typeof! = "boolean"&& (editinfo.message = status);

if (status === true) {

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

this.inputtd = null;

}또 다른{

ALERT (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');

}

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;

// 드래그 앤 드롭을 실행합니다

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

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

AddListener (문서, 'MouseMove', bindaseventListener (this, this.dragmove));

AddListener (문서, '마우스 업', 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) 반환

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 (문서, 'MouseMove', bindaseventListener (this, this.widthmove));

AddListener (문서, '마우스 업', bind (this, 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"});

드래그 업 : function () {

var closconfig = this.closconfig, rows = this.table.getElementsByTagName ( 'tr'), td, n, o, i = 0, l = rows.length;

this.div.style.display = "none";

removelistener (문서, 'mousemove');

removelistener (문서, '마우스 업');

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

closconfig.on = false;

if (closconfig.totd === null) 반환;

removeClass (this.headtds [closconfig.totd], 'thover');

// 동일한 열에서 열 교체가 수행되지 않습니다

if (closconfig.td === closconfig.totd) 반환;

// 열 교체를 확인합니다

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 = 행 [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 = left;

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-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 (문서, '마우스 업');

}

});

Window.onload = function () {

함수 checkname (val) {

if (val.replace (/^/s+$/g, '') === '') return '이름 입력이 비어있을 수 없습니다';

if (val.replace (/^/s+|/s+$/, ''). 길이> 10) '이름의 길이는 10 자 미만일 수 없습니다';

if (!/^[/u4e00-/u9fa5a-z]+$/i.test (val)) 반환 ''이름은 중국어 또는 편지로만 입력 할 수 있습니다 ';

진실을 반환하십시오.

};

함수 checkRemark (val) {

if (val.replace (/^/s+$/g, '') === '') return '참고 입력이 비어있을 수 없습니다';

if (val.replace (/^/s+|/s+$/, ''). 길이> 15) return 'return grengs는 15 자 미만일 수 없습니다';

if (!/^[/u4e00-/u9fa5/w/s]+$/i.test (val)) return 'notes는 중국어 숫자 밑줄 공간 만 입력 할 수 있습니다';

진실을 반환하십시오.

}

var set = [

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

{id : 2, type : "string", 편집 : {규칙 : checkname, message : ''}},

{id : 3, type : "date", edit : {rule :/^/d {4}/-/d {2}/-/d {2} $/, 메시지 : "이 형식에서 1985-02-30을 입력하십시오"}},

{id : 4, type : "string", 편집 : {규칙 : CheckRemark, 메시지 : ''}}

];

새 테이블 ($ ( "탭"), 세트);

}

</스크립트>

</body>

</html>

알려진 버그 :

IE6 중국어 텍스트는 자동으로 포장되지 않습니다

글자와 숫자가 자동으로 그것을 자동으로 포장하지 않는다는 것은 정말 성가신 일입니다.

크롬 브라우저를 클릭하는 것이 큰 문제인 것 같습니다. 로컬 테스트를받는 것이 더 좋습니다.