Question

我正在使用rails应用程序，并且我试图让HTML表的每一行对应一个复选框，然后单击行选择/取消选中该复选框。这在此处说明：http://jsfiddle.net/3XZvV/2/

但是，我想在我的rails项目中保留Prototype，所以有谁知道如何将它从jquery转换为原型或知道任何教程这样做？

继承我的（失败）尝试这样做：http://jsfiddle.net/3XZvV/12 /

Answer 1

我想这会做你的事：

$$('table.clickable tr').each(function(e) {
   e.observe('click', function() {
    e.toggleClassName('selected')
    });     
})

http://jsfiddle.net/3XZvV/14/

<强>更新

$$('table.clickable tr').each(function(e) {
   e.observe('click', function() {
    e.toggleClassName('selected')
    var ch = $(e).down('input')
        if(ch.checked) {
            ch.checked = false;
        }
       else {
           ch.checked = true;
       }    
    });     
})

Answer 2

我不知道Prototype，但你可以在没有库的情况下完成：

(function(){   
    var tables = GEBCN('clickable');

    for(var i = 0; i < tables.length; i++){
        var trs = tables[i].getElementsByTagName('tr');
        for(var j = 0; j < trs.length; j++){
            trs[j].onclick = function(){
               var c = this.getElementsByTagName('input');
               for(var i = 0; i < c.length; i++)
                   if(c[i].type == 'checkbox'){
                       // Set the checked property
                       c[i].checked = !c[i].checked;

                       // Set the checked attribute
                       if(c[i].getAttribute('checked'))
                           c[i].removeAttribute('checked');
                        else
                           c[i].setAttribute('checked', 'checked');
                   }
               // Toggle the table rows class
               toggleClass(this, 'selected');
            };
        }
    }

    function GEBCN(c){

        if(document.getElementsByClassName)
            return document.getElementsByClassName(c);

        var els = [];
        var all = document.getElementsByTagName("*");

        for(var i = all.length; i;)
            if(hasClass(all[--i], c))
                els.push(all[i]);

        return els;

    };

    function hasClass(el,c){
        var elc = ' '+el.className+' ';
        if(elc.indexOf(' '+c+' ') < 0)
            return false;
        return true;    
    }

    function addClass(el, c){
        if(c.indexOf(' ') >= 0)
            return false;
        if(hasClass(el, c))
            return true;
        el.className += ' '+c;
        return true;
    }

    function removeClass(el, c){
        if(c.indexOf(' ') > -1)
            return false;
        if(!hasClass(el, c))
            return true;
        var elc = (' '+el.className).replace(' '+c, '');
        if(elc.indexOf(' ') == 0)
            elc = elc.substring(1);
            el.className = elc;
        return true;
    }

    function toggleClass(el, c){
        if(hasClass(el, c))
            removeClass(el,c);
        else
            addClass(el,c);
    }
})();

JSFiddle

使用html表行作为复选框的方法？

2 个答案: