JQuery備忘録:ありがちなtableとチェックボックスのやつ #jQuery

table関係のJQueryライブラリだとかプラグインとかあるけれども、
どうもデザインが引っ張られてアレになってしまうので、ちょっと書いてみた。

index.html

<html>
<body>
    <table>
        <thead id="hoge-head">
            <tr>
                <th><input type="checkbox"></th>
                <th>No</th>
                <th>商品</th>
                <th>単価</th>
                <th>在庫</th>
            </tr>
        </thead>
        <tbody id="hoge-body">
            <tr>
                <td><input type="checkbox"></td>
                <td>1</td>
                <td>りんご</td>
                <td>80</td>
                <td>120</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>2</td>
                <td>みかん</td>
                <td>45</td>
                <td>88</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>3</td>
                <td>いちじく</td>
                <td>105</td>
                <td>311</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>4</td>
                <td>ぶどう</td>
                <td>72</td>
                <td>112</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

書いたことないので間違っている可能性大なメモ

theadにあるチェックボックスで全選択＆解除がしたい

script.js

(function($) {
    $.fn.checkboxSelectAll = function() {
        $(document).on('click', this.selector + ' th input[type="checkbox"]', function(event) {
            var table = $(event.target).parents('table');
            $('td input[type="checkbox"]', table).attr('checked', event.target.checked);
        });
    };
})( jQuery );

$('#hoge-head').checkboxSelectAll();

と書いておけばイケる。

tbodyにあるチェックしてる行が知りたい

script.js

(function($) {
    $.fn.checkboxSelection = function() {
        result = new Array();
        $(this.selector + ' tr').each(function (index, row) {
            if ($(row).find('input:checkbox').is(':checked')){
                result.push(index);
            }
        });
        return result;
    };
})( jQuery );

$('#hoge-body').checkboxSelection()

で選択行番号(0〜)が配列で帰ってくる