Question

以下是我用来改善表格可用性的4个函数：

如果单元格包含复选框，则单击复选框外部
tr包含data-url，然后整行都是“可点击的” 使用CSS悬停效果并在点击时重定向。
如果表中的最后一列包含相对/绝对URL 然后还点击重定向。
选中所有复选框。

这是我的代码：

// Click table cell auto check checkbox
$('table tr td').has("input[type=checkbox]").click(function(event) {
    // Onl call this if click outside of the checkbox itself
    if (event.target.type !== 'checkbox') {
        $(':checkbox', this).trigger('click');
    }
});

// Table row click 
$('table tr[data-url]').each(function(){
    var url = $(this).attr("data-url");
    if(url.length){
        $(this)
            .addClass("clickable")
            .find("td").click(function(){
                window.location = url;
                return false;
            }); 
    }
});

// Double click row, open edit link
$('table:not(.noDoubleClick) tr td').dblclick(function(e) {
    var linkEl = $(this).parents('tr').find('td:last-child a');
    var linkElHref = linkEl.attr('href');

    // Check if has href and http protocol
    if(!linkElHref.length || linkEl.prop('protocol').indexOf("http") !== 0){
        e.preventDefault();
        return false;
    }

    if (linkElHref && linkEl.attr('onclick') === undefined && !linkEl.hasClass("popme")) {
        document.location = linkElHref;
    } else {
        linkEl.click();
    }
});

// Check all checkboxes
$('table input[type=checkbox][name^="checkall"]').live("click",function() {
    var parent = $(this).parents('table');
    if(!$(this).parents('table').length){
        parent = $(this).parents("form");
    } 
    parent.find(':checkbox[name^="' + $(this).attr("data-name") + '"]').prop("checked", this.checked);
});

问：如何将其修改为一个函数，以便jquery只需要搜索一次表？

Example jsfiddle

感谢各位机构的建议，我最终采取了轻微的different approach：

$('table').each(function(){
    var $table= $(this), $cell, $row;

    // TABLE ROWS
    $table.find('tr').each(function(){
        $row = $(this);

        // Row click redirect to data-url
        var url = $row.attr("data-url");
        if(url && url.length){
            $row.addClass("clickable").find("td").click(function(){
                window.location = url;
                return false;
            });    
        }  

        // TABLE HEADING CELLS
        $row.find('th, thead td').each(function(){
            $cell = $(this);

            // Check all checkboxes
            $cell.find('input.checkall').live("click",function() {
                var parent = $(this).parents('table');
                if(!$(this).parents('table').length){
                    parent = $(this).parents("form");
                }
                parent.find(':checkbox[name^="' + $(this).attr("data-name") + '"]').prop("checked", this.checked);
            });
        });

        // TABLE CELLS
        $row.find('td').each(function(){
            $cell = $(this);

            // Check checbox onClick
            if($cell.find("input[type=checkbox]")){
                $cell.click(function(e) {
                    if(e.target.type !== 'checkbox') $(':checkbox', this).trigger('click');
                });
            }

            // Double click open edit link
            if(!$table.hasClass("noDoubleClick")){
                $cell.dblclick(function(e){
                    var linkEl = $(this).parents('tr').find('td:last-child a');
                    var linkElHref = linkEl.attr('href');

                    // Check if has href and http protocol
                    if(linkElHref && (!linkElHref.length || linkEl.prop('protocol').indexOf("http") !== 0)){
                        e.preventDefault();
                        return false;
                    }

                    if (linkElHref && linkEl.attr('onclick') === undefined && !linkEl.hasClass("popme")) {
                        document.location = linkElHref;
                    } else {
                        linkEl.click();
                    }
                });
            }          
        }); // end CELLS                 
    }); // end ROWS
}); // end TABLE

Answer 1

您应该使用.on，.live已被弃用：

  $(document).on('click', 'table tr td', function(event)
   {
       if( $(this).has("input[type=checkbox]"))
       {
            if (event.target.type !== 'checkbox') 
                $(':checkbox', this).trigger('click');
       }
    });

    // Table row click             
    $(document).on('click', 'table tr[data-url] td', function(e)
    {
        var url = $(this).parent().attr("data-url");
        if(url.length)
        {
           window.location = url;
           return false;
        }
    });


    $(document).on('dblclick', 'table:not(.noDoubleClick) tr td', function(e) {
        debugger;
        var linkEl = $(this).parents('tr').find('td:last-child a');
        var linkElHref = linkEl.attr('href');

        // Check if has href and http protocol
        if(!linkElHref.length || linkEl.prop('protocol').indexOf("http") !== 0){
            e.preventDefault();
            return false;
        }

        if (linkElHref && linkEl.attr('onclick') === undefined && !linkEl.hasClass("popme")) {
            document.location = linkElHref;
        } else {
            linkEl.click();
        }
    });

    // Check all checkboxes
    $(document).on('click', 'table input.checkall', function() {
        var parent = $(this).parents('table');
        if(!$(this).parents('table').length){
            parent = $(this).parents("form");
        } 
        parent.find(':checkbox[name^="' + $(this).attr("data-name") + '"]').prop("checked", this.checked);
    });

Answer 2

我已经在这里制作了基本存根，我不想重写你的所有代码。

  $(document).ready(function(){
    $('table').each(function(){
        var table = $(this);
        table.find('tr').each(function (){
            var tr = $(this);
            tr.find('td').each(function(){
                var td = $(this);
                td.has("input[type=checkbox]").click(function(event) {
            // Only call this if click outside of the checkbox itself
                    if (event.target.type !== 'checkbox') {
                        $(':checkbox', this).trigger('click');
                    }
                });
            });
        });
    });
});

逻辑是：查找所有表，遍历所有tr，然后循环td。我已经完成了你的第一个功能并希望解释它是如何使用的？

Answer 3

在这种情况下，最好的办法是：

获取页面中的所有表格
遍历每个表格
根据需要查找并应用逻辑到各个元素

$('table').each(function(){
   var table = $(this),
       rows  = table.find('tr[data-url]'),
       cells = table.find('td'),
       all   = table.find('input[type=checkbox][name^="checkall"]'),
       edit  = table.is('.noDoubleClick');

   cells.each(function(){
      //Apply your logic here
      if(edit === true){
         //Apply your logic to this cell here
      }
   });
   rows.each(function(){
      //Apply your logic to this row here       
   });
   all.on('click',function(){
       //Apply your logic here
   });

});

将4个类似的点击功能合并为一个

3 个答案: