合併4種類似的點擊功能於一體

Question

這裏有4個功能，我用它來提高表的可用性：

1. 如果單元格中包含一個複選框，並單擊複選框之外
2. 將在tr包含data-url然後整行是「可點擊」的 與CSS懸停效果和點擊重定向。
3. 如果表格中的最後一列包含相對/絕對網址 ，那麼也會在點擊後重定向。
4. 選中所有複選框。

這裏是我的代碼：

// 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

我在這裏做了個基本存根，我不想重寫所有的代碼。

$(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 2

你應該使用。對，.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 3

在這種情況下，做的最好的事情是：

1. 獲取所有的表在頁
2. 通過每個表循環
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 
    }); 

});