テーブルの行ごとクリックしてチェックボックスに対応する

Ads

Result

jQuery

$(document).ready(function() {
       //tr要素をクリックでイベント発火
           $('table tr').click(function() {
             //td要素からチェックボックスを探す
                  var $c = $(this).children('td').children('input[type=checkbox]');
                 if($c.prop('checked'))
                $c.prop('checked', '');
             else
                $c.prop('checked', 'checked');
           }); 
     });

css

table {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    border-collapse: collapse; 
    background: #fff;
    border-top:1px solid #ddd;
}

table tr td, 
table tr th {
        padding: 10px;
        vertical-align: top;
        text-align: left;
    }
    
    table tr th {
        background: #ddd ;
        color: #555;
        font-weight: bold;
    }
    
    table tr td {
        cursor: pointer;
       border-bottom:1px solid #ddd;
    }
    
    table tr:hover {
        background: #323232 ;
        color: #fff;
    }

a, a:visited {
    text-decoration: none;
    color: #000;
}
a:hover{color: #fff;}

html

<table>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Chrome</td>
            <td><a href="http://www.google.co.jp/chrome/">http://www.google.co.jp/chrome/</a></td>
            <td>★★★★★</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Firefox</td>
            <td><a href="http://mozilla.jp/firefox/">http://mozilla.jp/firefox/</a></td>
            <td>★★★★★</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Safari</td>
            <td><a href="http://www.apple.com/jp/safari/">http://www.apple.com/jp/safari/</a></td>
            <td>★★★★☆</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Opera</td>
            <td><a href="http://jp.opera.com/">http://jp.opera.com/</a></td>
            <td>★★★★☆</td>
        </tr>
    </table>

via

Checkbox & Table – Webstuffshare

タイトルとURLをコピーしました