JSFiddle - React, Tailwind, and code Playground

by ovillani

HTML

<p><input type="checkbox" name="first_name" checked="checked"> First Name 
  <input type="checkbox" name="last_name"> Last Name 
  <input type="checkbox" name="email" checked="checked"> Email</p>

<table id="report">
<thead>
<tr>
 <th class="first_name odd">First Name</th>
 <th class="last_name even">Last Name</th>
 <th class="email odd">Email</th>
</tr>
</thead>
<tbody>
<tr>
 <td class="first_name odd">Larry</td>
 <td class="last_name even ">Hughes</td>
 <td class="email odd">[email protected]</td>
</tr>
<tr>
 <td class="first_name odd">Mike</td>
 <td class="last_name even">Tyson</td>
 <td class="email odd">[email protected]</td>
</tr>
</tbody>

CSS

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

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

table {
    border: 1px solid black;
}

JavaScript

$("input:checkbox:not(:checked)").each(function() {
    var column = "table ." + $(this).attr("name");
    $(column).hide();
});

$("input:checkbox").click(function(){
    var column = "table ." + $(this).attr("name");
    $(column).toggle();
});