Question

我尝试使用jquery在表格中创建一个toggle函数，如下所示。触发切换功能时，表格行将隐藏;但是再次单击时，该行将取消隐藏但列未对齐。如何恢复表格行？

＆＃13;

<input type="text" class="form-control" id="title" placeholder="Write Title Later" >

＆＃13;

Answer 1

使用display: table-row代替表格格式。

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

＆＃13;

<!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>

＆＃13;

Answer 2

尝试使用table-row代替显示block。我想这是你的问题，并在这里回答how to revert back to normal after display:none for table row

＆＃13;

     <!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>

＆＃13;

切换表格行中的功能

2 个答案: