JSFiddle - React, Tailwind, and code Playground

by Mark Coleman

HTML

<table>
    <span><img id="1" checked="checked"  src="http://jquery.bassistance.de/validate/demo/images/checked.gif"/> Name</span> <br/>
    <span><img id="2" checked="checked"  src="http://jquery.bassistance.de/validate/demo/images/checked.gif"> Sex </span> <br/>
    <span><img id="3" src="http://jquery.bassistance.de/validate/demo/images/unchecked.gif"> Age </span><br/>

</table>

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

JavaScript

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