jQuery hiding columns on different tables
Question
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 https://stackoverflow.com/a/5901376/3658485
Am I going to have to select the table and iterate over its th / tds?
2 answers
solution1
2 ACCPTED 2016-11-28 21:53:02
你应该把这个：
'#table1 td:nth-child(4), #table1 th:nth-child(4)'
solution2
1 2016-11-28 21:54:22
$(document).ready(function() {
$('#table1 td:nth-child(4),th:nth-child(4)').hide();
});
Your code is selecting the td:nth-child(4) of table 1, but it is also selecting the th:nth-child(4) of all tables.
Best solution is call the td/th you want hidden and give it the table like so:
$(document).ready(function() {
$('td:nth-child(4),th:nth-child(4)', '#table1').hide();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.