Sean W. Sean W. - 6 days ago 5
HTML Question

jQuery hiding columns on different tables

I have the following code, but I can't tell why it is hiding columns on different tables. It seems that it is ignoring the first part of the selector which is the table id.

<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<table id="table1">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
<td>Val3</td>
<td>Val4</td>
<td>Val5</td>
<td>Val6</td>
<td>Val7</td>
</tr>
</tbody>
</table>
<table id="table2">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
<td>Val3</td>
<td>Val4</td>
<td>Val5</td>
<td>Val6</td>
<td>Val7</td>
</tr>
</tbody>
</table>
<table id="table3">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
<td>Val3</td>
<td>Val4</td>
<td>Val5</td>
<td>Val6</td>
<td>Val7</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#table1 td:nth-child(4),th:nth-child(4)').hide();
});
</script>
</body>




I tried this solution first http://stackoverflow.com/a/5901376/3658485

Am I going to have to select the table and iterate over its th / tds?

Answer

you should put this:

'#table1 td:nth-child(4), #table1 th:nth-child(4)'
Comments