JSFiddle - React, Tailwind, and code Playground

by Mark Coleman

HTML

<div class="legend">
    <div>Name</div>
    <div>Sex</div>
    <div>Age</div>
</div>

<table id="table" border="1">
    <tr class="headercell">
        <td>Name</td>
        <td >Sex</td>
        <td >Age</td>
    </tr>
    <tr class="datacell">
        <td>Paula</td>
        <td>Female</td>
        <td>52</td>
    </tr>
    <tr class="datacell">
        <td>Simon</td>
        <td>Male</td>
        <td>29</td>
    </tr>
</table>

<br/><br/>
Constraints: <br/>
- can't use form elements (inputs).  Have subsittuted checkboxes with img tag as figured this wopuld be ok.
- Cannot use Class's for tables  (as they are being used for CSS)
- Do not want to add any extra markup to tables.

<br/><br/>
Needs:<br/>
- Need to support IE 6.
- Needs to allow some columns to be hidden upon open. (eg 'Age' Column)

CSS

td, th {
    padding: 6px;
    border: 1px solid black;
}

.headercell {
    background-color: #f0eae2;
    font-weight: bold;
}

table {
    border: 1px solid black;
}
.legend div.unchecked
{
    background-image:url(http://jquery.bassistance.de/validate/demo/images/unchecked.gif);
}
.legend div
{
    background-repeat:no-repeat;
    background-image:url(http://jquery.bassistance.de/validate/demo/images/checked.gif);
    cursor:pointer;
    background-position:left center;
    padding-left:20px;
}

JavaScript

$('div.legend div').click(function() {
    $(this).toggleClass("unchecked");
    var t = $.trim($(this).text());
    var i = $(".headercell td:contains(" + t + ")").index() + 1;
    $('td:nth-child(' + i + ')').toggle();
});