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>

</head>

ボディ{font-size：12px}

#tab {border-collapse：collapse;}

.edit {height：16px;幅：98％;バックグラウンドカラー：＃eff7ff;フォントサイズ：12px;国境：0px;}

#tab thead td {background：url（http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_t.bmp）; color：＃183c94; word-break：break-all}

#tab tbody td {オーバーフロー：hidden; word-break：break-all;}

#tab td {border：1px solid #cecfce; height：20px; line-height：20px; vertical-align：middle; }

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

.div {width：10px; height：6px;国境：1pxソリッド＃999999;バックグラウンドカラー：#fffff;位置：絶対;ディスプレイ：なし;}

.line {width：2px;バックグラウンドカラー：＃999999;位置：絶対;ディスプレイ：なし}

.dr {height：100％; width：2px; background：#cecfce; float：right; margin-right：-1px; cursor：sw-resize}

.r {float：右;}

.l {float：left;}

#tab thead td.thover {background-image：url（http://album.hi.csdn.net/app_uploads/wtcsy/20081126/000054336.p.gif）; bawourkner-repeat：Repeal-x;}

</style>

<body>

<head>

<tr>

<tdclass = "tc"> <span> select </span> <div> </div> </td>

</tr>

</head>

<tbody>

<tr>

<td>カップ、すべてのカップ</td>

</tr>

<tr>

<td>ええ、私はWarcraftに優れたスキルを持っています</td>

</tr>

<tr>

<td>ペルシャ王子の刃は悪くありません</td>

</tr>

<tr>

<td>私の名前はzhao liu </td>です

</tr>

<tr>

<td>スイープして寝ます</td>

</tr>

<tr>

<td> asdorf </td>

<td>照明付きの暗い部屋</td>

</tr>

<tr>

<td>多くのカップ</td>

</tr>

<tr>

<td>多くの食器</td>

</tr>

<tr>

<td>多くの洗浄器具</td>

</tr>

<tr>

<td>イカには顔がいっぱいです</td>

</tr>

<tr>

<td> cialis兄弟</td>

</tr>

</tbody>

</table>

<スクリプト言語= "javascript">

（関数（ウィンドウ、未定義）{

window.sys = function（ua）{

var b = {

ie：/msie/.test(uua）&&！/pera/.test（ua）、

Opera：/pera/.test(uua）、

safari：/webkit/.test(uua）&&！/chrome/.test（ua）、

firefox：/firefox/.test(uua）、

Chrome： /chrome/.test(uua）

}、vmark = "";

for（b in bin）{

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

window。$ = function（id）{

document.getElementByID（ID）を返します。

};

window.addlistener = function（element、e、fn）{

！element.events &&（element.events = {}）;

Element.Events [e] &&（element.events [e] [addlistener.guid ++] = fn）||（ement.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]、type;

if（fn）{

for（ハンドラーを入力）

if（handlers [type] === fn）{

element.RemoveEventListener？element.RemoveEventListener（e、fn、false）：element.detachevent（ "on" + e、fn）;

ハンドラーを削除[タイプ];

}

}それ以外{

for（タイプインハンドラー）{

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;

それ以外

for（var i in o）

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

};

var slice = array.prototype.slice;

window.bind = function（object、fun）{

var args = slice.call（arguments）.slice（2）;

return function（）{

return fun.apply（object、args）;

};

window.bindaseventlistener = function（object、fun、args）{

var args = slice.call（arguments）.slice（2）;

return function（event）{

return fun.apply（object、[event || window.event] .concat（args））;

}

};

// JQからコピーします

window.extend = function（）{

var target = arguments [0] || {}、i = 1、length = arguments.length、deep = true、options;

if（typeof target === "boolean"）{

deep =ターゲット;

ターゲット=引数[1] || {};

i = 2;

}

if（typeof target！== "object" && object.prototype.tostring.call（ターゲット）！= "[オブジェクト関数]"）

ターゲット= {};

for（; i <length; i ++）{

if（（options = arguments [i]）！= null）

for（optionsのvar名）{

var src =ターゲット[name]、copy = options [name];

if（ターゲット===コピー）

続く;

if（deep && copy && typeof copy === "object" &&！copy.nodetype）{

ターゲット[name] = arguments.callee（deep、src ||（copy.length！= null？[]：{}）、copy）;

}

else if（copy！== undefined）

ターゲット[name] = 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（properties）{

var _class = function（）{return（arguments [0]！== null && this.Initialize && typeof（this.initialize）== 'function'）？ this.Initialize.Apply（this、arguments）：this;};

_Class.Prototype = Properties;

_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 = new class（{

オプション：{

ミニ幅：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 = {

オン：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 ++）

（チェックボックス[i] .type == "チェックボックス" ||チェックボックス[i] .type == "Radio"）&&

addListener（チェックボックス[i]、 "click"、bind（this、function（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 = document、tabtads = tab.getelementsbytagname（ 'td'）、length = this.theadtds.length;

//編集に使用される入力

this.input = d.createElement（ 'input'）;

this.input.type = "text";

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（tab）.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] = {rule：set [i] .edit.rule、message：set [i] .edit.message}）;

}

//すべてのTRをソートするために配列に入れます

for（i = 0、l = rows.length; i <l; i ++）

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

//すべてのTDを通過して、いくつかの設定を作成します

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、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（/.$/、 '！

};

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（this.checkboxのvar）

this.checkbox [s] .Checked = true;

}

this.sortcol = td; //どの列がソートであるかを記録します

}、

比較：function（n、type）{

return function（a1、a2）{

var convert = {

int：function（v）{return parseint（v）}、

float：function（v）{return parsefloat（v）}、

日付：function（v）{return v.tostring（）}、

文字列：function（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;

};

}、

編集：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）の '長さ'

「[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）;

// firefoxの直接input.focus（）を使用し、settimeoutを実行せずに実行できません

setimeout（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;

//ドラッグアンドドロップを実行します

if（elem.nodename.tolowercase（）=== 'td'）{

this.closconfig.td = elem.getattribute（ 'clos'）;

addListener（document、 'mousemove'、bindaseventlistener（this、this.dragmove））;

addListener（document、 '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.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.offseetheight +"px";

addListener（document、 'mousemove'、bindaseventlistener（this、this.widthmove））;

addListener（document、 '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 = rows.length;

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

Removelistener（document、 'mousemove'）;

Removelistener（document、 'mouseup'）;

sys.ie && this.thead.releasecapture（）;

closconfig.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;

}

for（; i <l; i ++）{

td = rows [i] .getelementsbytagname（ 'td'）;

rows [i] .intertbefore（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"、left：left+"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（document、 'mousemove'）;

Removelistener（document、 'mouseup'）;

}

}）;

window.onload = function（）{

function checkname（val）{

if（val.Replace（/^/s+$/g、 ''）=== ''）return 'name inputは空にすることはできません';

if（val.Replace（/^/s+|/s+$/、 ''）。長さ> 10） 'return'名前の長さは10文字を超えることはできません」。

if（！/^[/u4e00-/u9fa5a-z]+$/i.test（val））return '名前は中国語または文字でのみ入力できます」;

trueを返します。

};

関数checkremark（val）{

if（val.replace（/^/s+$/g、 ''）=== ''）return 'note入力は空になりません';

if（val.Replace（/^/s+|/s+$/、 ''）。長さ> 15）remarks remarks lengthは15文字を超えることはできません」。

if（！/^[/u4e00-/u9fa5/w/s]+$/$/i.test（val））return 'ノートは中国の数値の下スコアスペースのみに入ることができます」;

trueを返します。

}

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ブラウザをクリックすることは大きな問題のようであり、ローカルテストを受ける方が良いでしょう