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?

score 2 · Accepted Answer · answered Nov 28 '16 at 21:53

2

you should put this:

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

answered Nov 28 '16 at 21:53

TheClonerx

343
2
13

Yep that was it. I needed to include the table id again after the comma. That totally makes sense. Thank you. – Sean W. Nov 28 '16 at 21:54

score 1 · Answer 2 · answered Nov 28 '16 at 21:54

$(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();
});

jQuery hiding columns on different tables

2 Answers2