Javascript はテーブルの並べ替え、編集、ドラッグ、ズームを実装します

単純なテーブルの並べ替え

ダブルクリックしてカスタマイズした編集ルールを編集できます

列をドラッグして列を置換

境界線を押して列幅を拡大縮小できます

コードをコピーコードは次のとおりです:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

Table

<スクリプト言語="javascript">
(関数(ウィンドウ,未定義){
window.Sys = function (ua){
    var b = {
        例: /msie/.test(ua) && !/opera/.test(ua),
        オペラ: /opera/.test(ua),
        サファリ: /webkit/.test(ua) && !/chrome/.test(ua),
        Firefox: /firefox/.test(ua),
        クロム: /chrome/.test(ua)
    },vMark = "";
    for (var i in b) {
        if (b[i]) { vMark = "サファリ" == 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);

var スライス = Array.prototype.slice;
window.Bind = function(object, fun) {
    var args = slide.call(arguments).slice(2);
    return function() {
            return fun.apply(object, args);
    };
};
window.BindAsEventListener = function(object, fun,args) {
    var args = slide.call(arguments).slice(2);
    戻り関数(イベント) {
        return fun.apply(object, [event || window.event].concat(args));
    }
};
//jQからコピー
window.Extend = function(){
var ターゲット = 引数[0] || {}、i = 1、長さ = argument.length、深さ = true、オプション;
if ( typeof target === "boolean" ) {
  深い = ターゲット;
  ターゲット = 引数[1] || {};
  i = 2;
}
if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[オブジェクト関数]")
  ターゲット = {};
for(;i   if ( (オプション = 引数[ i ]) != null )
   for(オプションの変数名){
    var src = ターゲット[名前]、コピー = オプション[名前];
    if (ターゲット === コピー)
     続行;
    if ( deep && copy && typeof copy === "object" && !copy.nodeType ){
     target[ name ] = argument.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );
    }
    else if(コピー !== 未定義)
     ターゲット[名前] = コピー;
   }
}
リターンターゲット。
};
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(properties){
    var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, argument) : this;};
    _class.prototype = プロパティ;
    return _class;
};
window.hasClass = function(element, className){
return element.className.match(new RegExp('(\s|^)' className '(\s|$)'));
} ;
window.addClass = function(element, className) {
!this.hasClass(要素, クラス名)&&(要素.クラス名 = " " クラス名);
}
window.removeClass = function(element, className) {
hasClass(element, className)&&(element.className = element.className.replace(new RegExp('(\s|^)' className '(\s|$)'),' ')) ;
}
})(ウィンドウ);

既知のバグ:

IE6 では中国語が自動的に折り返されません

Internet Explorer で実行していないときに文字と数字が自動的に折り返されないのは本当に迷惑です

Chrome ブラウザでクリックして実行すると大きな問題が発生するようです。ローカルテストを行った方がよいでしょう。

ID	选中	姓名	生日	备注
1		小三	1982-05-27	カップ具、すべてはカップ具
3		李四	1983-06-27	恩恩我魔兽技术不错
2		王五	1987-05-27	波斯王子時之刃还不错
4		赵六	1988-05-27	我叫赵六
5		朱八	1984-05-27	洗洗睡吧
6		阿斯多夫	1984-06-27	阿斯多夫暗室逢灯
7		コップ具	1984-06-27	非常に多くのカップ器具
8		餐具	1984-02-27	非常に多くの餐具
8		洗浄具	1984-08-27	非常に多くの洗浄具
9		内牛满面	1984-12-27	10快一晚
10		犀利哥	1984-12-21	嘿嘿

Javascript はテーブルの並べ替え、編集、ドラッグ、ズームを実装します_JavaScript スキル