jQuery Table click

by master1991

HTML

<table>
<thead>
    <tr class="grey">
        <th width="140px">Achternaam</th>
        <th width="80px">Initialen</th>
        <th width="80px">Tussenv.</th>
        <th width="80px">Geslacht</th>
        <th width="100px">Geb.dat.</th>
    </tr>
</thead>
<tbody>
    <tr data-details="c01" class="customer">
        <td>Pietersen</td>
        <td>M.</td>
        <td>Van</td>
        <td>Male</td>
        <td>18-07-1956</td>
    </tr>
    <tr data-details="c02" class="customer grey">
        <td>Janssen</td>
        <td>A.</td>
        <td>&nbsp;</td>
        <td>Female</td>
        <td>16-12-1972</td>
    </tr>
    <tr data-details="c03" class="customer">
        <td>Puk</td>
        <td>P.L.</td>
        <td>Van der</td>
        <td>Female</td>
        <td>16-07-1965</td>
    </tr>
</tbody>
</table>
<br /><br />
<table id="c01" class="aside hidden">
    <tbody>
        <tr>
            <td width="115px">Achternaam</td>
            <td width="115px">Pietsersen</td>
        </tr>
        <tr>
            <td>Tussenvoegsel</td>
            <td>Van</td>
        </tr>
        <tr>
            <td>Initialen</td>
            <td>M.</td>
        </tr>
        <tr>
            <td>Geslacht</td>
            <td>Man</td>
        </tr>
        <tr>
            <td>Geboortedatum</td>
            <td>18-07-1956</td>
        </tr>
    </tbody>
</table> 
<table id="c02" class="aside hidden">
    <tbody>
        <tr>
            <td width="115px">Bchternaam</td>
            <td width="115px">Pietsersen</td>
        </tr>
        <tr>
            <td>Tussenvoegsel</td>
            <td>Van</td>
        </tr>
        <tr>
            <td>Initialen</td>
            <td>M.</td>
        </tr>
        <tr>
            <td>Geslacht</td>
            <td>Man</td>
        </tr>
        <tr>
            <td>Geboortedatum</td>
            <td>18-07-1956</td>
        </tr>
    </tbody>
</table>

CSS

table { border: 1px solid grey; position: relative; top: 20px; left: 20px; }
th { font-weight: bold; }
tr.customer:hover { background-color: #CCEBCC; }
.grey { background-color: #F0F0F0; }
.aside { width: 230px; }
.show { display: block; }
.hidden { display: none; }

JavaScript

$(document).ready(function () {
    $('tr.customer').click(function() {
        var id = $(this).data('details');
        $('table.hidden').hide();
        $('#'+id).show();
    });
});