Maison >interface Web >js tutoriel >Javascript implémente les compétences de tri, d'édition, de glisser et de zoom des tableaux_javascript

Javascript implémente les compétences de tri, d'édition, de glisser et de zoom des tableaux_javascript

WBOYoriginal: 2016-05-16 16:22:451022parcourir

Tri simple des tableaux

Vous pouvez double-cliquer pour modifier les règles modifiées personnalisées

Faites glisser les colonnes pour les remplacer

Vous pouvez pousser la bordure pour redimensionner la largeur de la colonne

Copier le code Le code est le suivant :

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

Table






























































≪/tr>












≪/tr>

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	嘿嘿

(fonction(fenêtre,non défini){
window.Sys = fonction (ua){
    varb = {
        c'est-à-dire : /msie/.test(ua) && !/opera/.test(ua),
        opéra : /opera/.test(ua),
        safari : /webkit/.test(ua) && !/chrome/.test(ua),
        Firefox : /firefox/.test(ua),
        chrome : /chrome/.test(ua)
    },vMarque = "";
    pour (var i en b) {
        if (b[i]) { vMark = "safari" == i ? "version" : je; casser; >
    >
    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;
    retourner b;
}(window.navigator.userAgent.toLowerCase());

window.Sys.ie6&&document.execCommand("BackgroundImageCache", false, true);

fenêtre.$ = fonction(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 gestionnaires = element.events[e],type;
    si(fn){
        pour (tapez les gestionnaires)
            if(handlers[type]===fn){
                element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" e,fn);
                supprimer les gestionnaires[type];
            >
    }autre{
        pour(tapez les gestionnaires){
            element.removeEventListener?element.removeEventListener(e,handlers[type],false):element.detachEvent("on" e,handlers[type]);
            supprimer les gestionnaires[type];
        >
    }
};
window.setStyle = fonction(e,o){
    si(typeof o=="string")
        e.style.cssText=o;
    autre
        pour(var i in o)
            e.style[i] = o[i];
};

var slice = Array.prototype.slice;
window.Bind = fonction (objet, amusant) {
    var args = slice.call(arguments).slice(2);
    return function() {
            return fun.apply(object, args);
    };
};
window.BindAsEventListener = function(objet, fun,args) {
    var args = slice.call(arguments).slice(2);
    fonction de retour (événement) {
        return fun.apply(object, [event || window.event].concat(args));
    >
};
//copie depuis jQ
window.Extend = function(){
var cible = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options;
if ( typeof target === "boolean" ) {
  profond = cible ;
  cible = arguments[1] || {};
  je = 2;
>
if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]")
  cible = {};
pour(;je   if ( (options = arguments[ i ]) != null )
   pour(nom de la variable dans les options){
    var src = cible[ nom ], copie = options[ nom ];
    si (cible === copie)
     continuer ;
    if ( deep && copy && typeof copy === "object" && !copy.nodeType ){
     target[ nom ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );
    }
    sinon if(copie !== non défini)
     cible[nom] = copie ;
   >
>
cible de retour ;
};
window.objPos = fonction(o){
var x = 0, y = 0;
faire{x = o.offsetLeft;y = o.offsetTop;}while((o=o.offsetParent));
return {'x':x,'y':y};
>
window.Class = fonction (propriétés) {
    var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
    _class.prototype = propriétés;
    retourner _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|$)'),' ')) ;
}
})(fenêtre);

BUG connu :

Sous ie6, le chinois ne s'enroule pas automatiquement

C'est vraiment ennuyeux que les lettres et les chiffres ne s'ajustent pas automatiquement lorsqu'ils ne sont pas exécutés dans Internet Explorer

Il semble y avoir un gros problème lors du clic et de l'exécution dans le navigateur Chrome. Il serait préférable de faire un test local

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction à Vérité et Faux dans les compétences JavaScript_javascriptArticle suivant：Introduction à Vérité et Faux dans les compétences JavaScript_javascript

Articles Liés

Voir plus