CODEWITHSUNDEEP
jqueryhtml
user9594905
user9594905

Reputation:

Toggle function in table row

I tried to create a toggle function in the table thead with jquery as below. When the toggle function fires, the table row will hide; But when clicked again, the row unhides but the columns are not aligned. How do I restore the table row?

     <!DOCTYPE html>
        <html>
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <body>
        <style>
        #myDIV {
            width: 100%;
            text-align:right;
        
        }
        </style>
        </head>
        <body>
        
          <table class="w3-table-all" >
            <thead>
              <tr class="w3-light-grey w3-hover-green"onclick="myFunction()" >
                <th>First Name 
                <td> abc</td> 
                <td>abc</td>
                </th>
                
              </tr>
            </thead>
            <div >
            <tr class="w3-hover-green"  id="myDIV" >
              <th >Jill       <td >Smith</td>
              <td >50</td></th>
        
            </tr>
            </div>
        
            <tr class="w3-hover-text-green">
              <td>Bo</td>
              <td>Nilson</td>
              <td>35</td>
            </tr>
          </table>
        
        
        <script>
        function myFunction() {
            var x = document.getElementById("myDIV");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
        </script>
        
        </body>
        </html>

Upvotes: 0

Views: 467

Answers (2)

Lex
Lex

Reputation: 5014

Try using table-row instead of display block. I think this is your question, and answered here how to revert back to normal after display:none for table row

     <!DOCTYPE html>
        <html>
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <body>
        <style>
        #myDIV {
            width: 100%;
            text-align:right;
        
        }
        </style>
        </head>
        <body>
        
          <table class="w3-table-all" >
            <thead>
              <tr class="w3-light-grey w3-hover-green"onclick="myFunction()" >
                <th>First Name 
                <td> abc</td> 
                <td>abc</td>
                </th>
                
              </tr>
            </thead>
            <div >
            <tr class="w3-hover-green"  id="myDIV" >
              <th >Jill       <td >Smith</td>
              <td >50</td></th>
        
            </tr>
            </div>
        
            <tr class="w3-hover-text-green">
              <td>Bo</td>
              <td>Nilson</td>
              <td>35</td>
            </tr>
          </table>
        
        
        <script>
        function myFunction() {
            var x = document.getElementById("myDIV");
            if (x.style.display === "none") {
                x.style.display = "table-row";
            } else {
                x.style.display = "none";
            }
        }
        </script>
        
        </body>
        </html>

Upvotes: 0

Sakata Gintoki
Sakata Gintoki

Reputation: 1825

Using display: table-row instead for table row format.

x.style.display = "table-row";

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <body>
    <style>
    #myDIV {
        width: 100%;
        text-align:right;

    }
    </style>
    </head>
    <body>

      <table class="w3-table-all" >
        <thead>
          <tr class="w3-light-grey w3-hover-green"onclick="myFunction()" >
            <th>First Name 
            <td> abc</td> 
            <td>abc</td>
            </th>

          </tr>
        </thead>
        <div >
        <tr class="w3-hover-green"  id="myDIV" >
          <th >Jill       <td >Smith</td>
          <td >50</td></th>

        </tr>
        </div>

        <tr class="w3-hover-text-green">
          <td>Bo</td>
          <td>Nilson</td>
          <td>35</td>
        </tr>
      </table>


    <script>
    function myFunction() {
        var x = document.getElementById("myDIV");
        if (x.style.display === "none") {
            x.style.display = "table-row";
        } else {
            x.style.display = "none";
        }
    }
    </script>

    </body>
    </html>

Upvotes: 2

Related Questions