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

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

如果单元格包含复选框，并且您在复选框外单击

tr

包含

数据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);
});

Q:如何将其修改为一个函数，以便jquery只需搜索一次表

谢谢大家的建议，我最后稍微考虑了一下：

---

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

  $(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。我已经完成了你的第一个功能，希望这能解释如何使用它

---

​

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

  $(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。我已经完成了你的第一个功能，希望这能解释如何使用它

---

​

您应该使用.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);
    });​

---

您应该使用.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);
    });​

---

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

获取页面中的所有表

循环浏览每个表

根据需要查找并将逻辑应用于各个元素

---

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

获取页面中的所有表

循环浏览每个表

根据需要查找并将逻辑应用于各个元素

---

还有，在这个问题中，我如何正确地设置数字列表的格式？simuar应该是“相似”的还是其他什么？还有，我如何正确地设置这个问题中的数字列表的格式？simuar应该是“相似”的还是其他什么？我得到了一个与此非常相似的解决方案。也许代码比其他答案多一点，但我发现这是最可读的。我最终得到了一个与此非常类似的解决方案。也许代码比其他答案多一点，但我发现这是最可读的。