I want to show/hide a column of a table using javascript/jquery .
Pressing a button shows or hides the entire column. The name of the column is the TH identified by an id I have achieved it by adding a class to each TD but I don't like this solution, I would like to achieve it without adding so much class attribute.
$(document).ready(function(){
$("#ocultar").click(function(){
$(".pais").hide();
});
$("#mostrar").click(function(){
$('.pais').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th class="pais">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td class="pais">Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td class="pais">Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td class="pais">Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td class="pais">UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td class="pais">Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td class="pais">Italy</td>
</tr>
</table>
<button id="ocultar">Hide</button>
<button id="mostrar">Show</button>