AnswerBun.com

Hide several tds inside the table

I am trying to hide tds cells inside the first tr. I placed them inside an div with id="status2". I am trying to hide them by calling the following jQuery(‘#status2’).hide(); but they are not being hidden

Is it possible somehow to hide and to show the 3 tds inside the div on some condition? I do not want in this case to add several ids to the 3 tds.

<html>
<head>
<title>Page Title</title>
</head>
<body>
 <table border='0' width='100%'>
        <tr >
            <td width="20%"  class="bold">Status 1:</td>
            <td><select name="status1" id="status1"><option value="null">select:</option>
                </select>
            </td>
            <!--I want to hide the next 3 tds on some condition-->
            <div id="status2">
            <td colspan="2"> </td>
            <td class="bold">status 2:</td>
            <td><select>
                    <option value="null">select</option>
                    <option value="SV">V - 1</option>
                    <option value="SK">V - 2</option>
            </select></td>
            </div>          
        </tr>
        <tr id="status3">
            <td width="20%" class="bold">Status 3:</td>
            <td><select>
                    <option value="null">select</option>
                    <option value="SV">V - 3</option>
                    <option value="SK">V - 4</option>
                </select>
            </td>
        </tr>
    </table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
jQuery('#status2').hide();
</script>
</body>
</html>

Stack Overflow Asked by tree on February 19, 2021

2 Answers

2 Answers

Instead of wrapping the TDs in a div, just give each td the same class.

Also, you can't actually run javascript in the script tag that is remotely loading a file.

jQuery('.status2').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <table border='0' width='100%'>
        <tr >
            <td width="20%"  class="bold">Status 1:</td>
            <td><select name="status1" id="status1"><option value="null">select:</option>
                </select>
            </td>
            <!--I want to hide the next 3 tds on some condition-->
            <td class="status2" colspan="2">&#160;</td>
            <td class="bold status2">status 2:</td>
            <td class="status2"><select>
                    <option value="null">select</option>
                    <option value="SV">V - 1</option>
                    <option value="SK">V - 2</option>
            </select></td>
        </tr>
        <tr id="status3">
            <td width="20%" class="bold">Status 3:</td>
            <td><select>
                    <option value="null">select</option>
                    <option value="SV">V - 3</option>
                    <option value="SK">V - 4</option>
                </select>
            </td>
        </tr>
    </table>

Correct answer by imvain2 on February 19, 2021

You can use jQuery selectors.

here's a working example: https://jsfiddle.net/udrohgf5/1/

I've used the following selector in order to hide the cells.

$('table tr:first td:lt(3)').hide();

which is basically - take the first 3 cells of the first row, and hide them.

:first - first occurance of that element.

:lt(n) - element index is lower than n

Answered by Hagai Wild on February 19, 2021

Add your own answers!

Related Questions

Print [Python] seen as a keyword in Pycharm

1  Asked on February 20, 2021 by jleno46

     

Express req.subdomains empty

1  Asked on February 20, 2021

   

How to exclude data in mySQL string?

2  Asked on February 20, 2021 by markus

     

ERROR at line 3: ORA-00911: invalid character” when joining tables

2  Asked on February 19, 2021 by sinafarheidar12

   

How to transport data from csv to Excel

2  Asked on February 19, 2021 by tangercity

         

How to call Ajax datatables with parameter ASP.NET MVC?

3  Asked on February 19, 2021 by truong-hoang

       

Hide several tds inside the table

2  Asked on February 19, 2021 by tree

     

Kubernetes Conditions.Ready and ContainersReady are false

0  Asked on February 19, 2021 by user3877654

 

Highlight multiple cells using mxCellHighlight

2  Asked on February 18, 2021 by boris

   

How to get all dates up to a certain date?

1  Asked on February 18, 2021 by beck

   

How do I write a script that alerts a input value given by a visitor?

3  Asked on February 18, 2021 by mehmet-akif-vardar

 

Why is “==” not acceptable here?

1  Asked on February 18, 2021 by askman

     

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved.