CODEWITHSUNDEEP
javascriptjqueryhtml
Sean W.
Sean W.

Reputation: 863

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 https://stackoverflow.com/a/5901376/3658485

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

Upvotes: 0

Views: 31

Answers (2)

jamadri
jamadri

Reputation: 956

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

Upvotes: 1

TheClonerx
TheClonerx

Reputation: 343

you should put this:

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

Upvotes: 2

Related Questions