JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<div id="tableControl">
    <div class="checked">Name</div>
    <div class="checked">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;
}
#tableControl div  {
    cursor: pointer;
    background:url(http://jquery.bassistance.de/validate/demo/images/unchecked.gif) no-repeat;
    padding-left:  20px;
}
#tableControl div.checked {
    background:url(http://jquery.bassistance.de/validate/demo/images/checked.gif) no-repeat;
    padding-left:  20px;
}

JavaScript

var hideColumn = function(el) {
    var $el = $(el),
        name = $.trim($el.text()),
        checked = !$el.is('.checked'),
        column = $('.headercell td:contains(' + name + ')').index() + 1;
    $('td:nth-child(' + column + ')').toggle(checked);
    $el.toggleClass('checked', checked);
};

$('#tableControl div')
    .each(function() {
        if (!$(this).is('.checked')) {
            // add class so the script can remove it (on startup)
            $(this).addClass('checked');
            hideColumn(this);
        }
    }).click(function() {
        hideColumn(this);
    });