JavaScript 表格样式v1.3

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 表格样式v1.3相关的知识,希望对你有一定的参考价值。

/*
**************************************
* FormStyle Class v1.3               *
* Autor: Carlos R. L. Rodrigues      *
**************************************
*/

//========================================================
// REQUIRES http://www.jsfromhell.com/geral/event-listener
//========================================================
    
FormStyle = function(f){
    var o = this, lb = document.getElementsByTagName("label");
    o.f = [], o.c = o.u = o.ch = o.uh = "", o.img = function(r, f){
        var i = new Image, s = f.style;
        i.src = r, i.title = f.title, f._img = i;
        s.position = "absolute", s.top = s.left = "-100px";
        var md = function(e){
            (e.key == 9 && (o._c = 1)) || ((e.key == 32 || (e.button || e.key == 1)) &&
            (f._img.src = f.checked ? o.cc || o.c : o.uc || o.u));
        },
        mv = function(){f._img.src = f.checked ? o.ch || o.c : o.uh || o.u;},
        mo = function(){
            var i = f._img, c = !o._c;
            i.src = f.checked ? i.src.indexOf(o.cc) > -1 && c ? o.cc : o.c :
            i.src.indexOf(o.uc) > -1 && c ? o.uc : o.u, o._c = 0;
        };
        for(var l = lb.length; l--;)
            if(f.id == lb[l].htmlFor && !(addEvent(lb[l], "mousedown", md), addEvent(lb[l], "keydown", md),
                addEvent(lb[l], "mouseover", mv), addEvent(lb[l], "mouseout", mo))) break;
        i.onclick = function(){f.click(), f.focus();};
        return addEvent(f, "click", function(){
            var f = this;
            if(/radio/i.test(f.type))
                for(var e = f.form[f.name], j = e.length; j--; e[j]._img.src = o.u);
            return f._img.src = f.checked ? o.c : o.u;
        }), addEvent(i, "mousedown", md), i.onmouseover = mv, i.onmouseout = mo,
        addEvent(f, "focus", mv), addEvent(f, "blur", mo), addEvent(f, "keydown", md), i;
    }
    o.check = function(f, u){
        (!u && f.type == "radio" && !f.click()) || (f.checked = !u, f._img.src = this[u ? "u" : "c"]);
    }
    o.uncheck = function(f){this.check(f, true);}
    addEvent(o.form = document.forms[f], "reset", function(){
        setTimeout(function(){
            for(var j, a, i = o.f.length; i--;)
                if(j = (a = o.f[i]).length)
                    while(j--) a[j]._img.src = a[j].checked ? o.c : o.u;
                else a._img.src = a.checked ? o.c : o.u;
        }, 1);
    });
}
FormStyle.prototype.checked = function(o){
    this.c = o.initial, this.ch = o.over, this.cc = o.click;
}
FormStyle.prototype.unchecked = function(o){
    this.u = o.initial, this.uh = o.over, this.uc = o.click;
}
FormStyle.prototype.apply = function(){
    var o = this, a, l = (a = arguments).length, f = o.form, i = o.img, x, j;
    if(!o.c || !o.u) return;
    while(l--)
        if(j = (o.f.push(x = f[a[l]]), x).length)
            while(j--) x[j].parentNode.insertBefore(i(x[j].checked ? o.c : o.u, x[j]), x[j]);
        else x.parentNode.insertBefore(i(x.checked ? o.c : o.u, x), x);
}

以上是关于JavaScript 表格样式v1.3的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript(第二十天)DOM操作表格及样式

javascript element-ui@1.x版动态隐藏表格固定列边样式的指令

javascript Angular v1.2到v1.3变迁

JQuery EasyUI DataGrid根据条件设置表格行样式(背景色)

JavaScript 使用DOM操纵样式表

浏览器仿EXCEL表格插件 版本更新 - 智表ZCELL产品V1.3.2更新