javascript - 4 つの類似したクリック機能を 1 つに統合

Question

テーブルの使いやすさを向上させるために私が使用する 4 つの関数を次に示します。

1. セルにチェックボックスが含まれていて、チェックボックスの外側をクリックした場合
2. がtr含まれているdata-url場合、行全体が CSS ホバー効果で「クリック可能」になり、クリック時にリダイレクトされます。
3. テーブルの最後の列に相対/絶対 URL が含まれている場合は、クリック時にもリダイレクトされます。
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);
});

Q:これを 1 つの関数に変更して、jquery がテーブルを 1 回検索するだけで済むようにするにはどうすればよいですか?

jsfiddle の例

私が最終的にわずかに異なるアプローチを取ることになったすべてのボディの提案に感謝します:

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

この場合の最善の方法は次のとおりです。

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

});

Answer 3

ここで基本的なスタブを作成しました。すべてのコードを書き直したくありません。

  $(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 をループします。私はあなたの最初の機能を実行しましたが、それがどのように使用できるかを説明したいと思いますか?

</p>