Question

Here are 4 functions I use to improve the usability of a table by:

1. If cell contains a checkbox and you click outside of a checkbox
2. The the tr contains data-url then the whole row is “clickable”
   with CSS hover effect and redirects on click.
3. If the last column in the table contains a relative/absolute URL
   then also redirects on click.
4. Check all checkboxes.

Here’s my code:

// 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);
});

Q: how can I modify this into one function so that jquery only has to search for tables once?

Example jsfiddle

Thanks for every bodies suggestions I have ended up taking a slightly 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

I have made the basic stubs here, i dont want to rewrite all your code.

  $(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');
                    }
                });
            });
        });
    });
});
​

The logic is: Find all tables, loop through all the tr’s and then the td’s. I’ve did your first function and hope that explains how it could be used?

​