单击按钮时如何显示/隐藏整个列？

Question

我有一个webapp，结果页返回一个包含多列的表，我希望我的按钮隐藏或显示该列。

我尝试创建执行此操作的函数，然后将函数调用为onclick

<button onclick="myFunction()">Show/Hide</button>

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

    </script> 

这是它产生的表，我希望其中一列可以隐藏和显示

        <table class="table table-sm">
            <thead>
                <tr>
                    <th scope="col">Table</th>
                    <th scope="col">Column</th>
                    <th scope="col">Description</th>
                    <th scope="col">Data Type</th>
                    <th scope="col">Length</th>
                    <th scope="col" id="myDIV">Data Stewards</th>
                </tr>
            </thead>
            <tbody>
                {% for r in results %}
                    <tr>
                        <td>{{r.tbl_name}}</td>
                        <td>{{r.col_name}}</td>
                        {% if r.FreeText!="nan" %}
                            <td>{{r.FreeText}}</td>
                        {% else %}
                            <td></td>
                        {% endif %}
                        <td>{{r.DataType_Name}}</td>
                        <td>{{r.DataType_MaxLength}}</td>

                        {% if r.tag_cat_name=="Data Stewards" %}
                            <td> {{r.tag_name}}</td>
                        {% else %}
                            <td></td>
                        {% endif %}


                    </tr>
                {% endfor %}
            </tbody>
        </table>

以这种格式，它仅隐藏/显示Data Stewards列标题，而不是整个列

Answer 1

您可以给想要显示/隐藏的td使用相同的类。假设您要为数据管理者执行此操作，则可能看起来像这样：

HTML：

<table class="table table-sm">
    <thead>
        <tr>
            <th scope="col">Table</th>
            <th scope="col">Column</th>
            <th scope="col">Description</th>
            <th scope="col">Data Type</th>
            <th scope="col">Length</th>
            <th scope="col" class="myDIVs">Data Stewards</th>
        </tr>
    </thead>
    <tbody>
        {% for r in results %}
            <tr>
                <td>{{r.tbl_name}}</td>
                <td>{{r.col_name}}</td>
                {% if r.FreeText!="nan" %}
                    <td>{{r.FreeText}}</td>
                {% else %}
                    <td></td>
                {% endif %}
                <td>{{r.DataType_Name}}</td>
                <td>{{r.DataType_MaxLength}}</td>    
                {% if r.tag_cat_name=="Data Stewards" %}
                    <td class="myDIVs"> {{r.tag_name}}</td>
                {% else %}
                    <td class="myDIVs"></td>
                {% endif %}    
            </tr>
        {% endfor %}
    </tbody>
</table>

JS：

function myFunction() {
  const myDIVs = document.getElementsByClassName("myDIVs");
  for (let i = 0; i < myDivs.length; i++) {
    if (myDivs[i].style.display === "none") {
        myDivs[i].style.display = "block";
    } else {
        myDivs[i].style.display = "none";
    }
  }
} 

Answer 2

一个JQuery解决方案？

    $('#btn').click(function(){
        var ths = $('th');
        var trs = $('tr td');
        ths.each(function(index) {
          if($(this).attr('id') == 'myDIV') {
            $(ths[index]).toggle();
            $(trs[index]).toggle();
          }
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table>
      <thead>
        <tr>
          <th scope="col">Table</th>
          <th scope="col">Column</th>
          <th scope="col">Description</th>
          <th scope="col">Data Type</th>
          <th scope="col">Length</th>
          <th scope="col" id="myDIV">Data Stewards</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{r.tbl_name}}</td>
          <td>{{r.col_name}}</td>
          <td>{{r.FreeText}}</td>
          <td></td>
          <td>{{r.DataType_Name}}</td>
          <td>{{r.DataType_MaxLength}}</td>
          <td> {{r.tag_name}}</td>
          <td></td>
        </tr>
      </tbody>
    </table>

    <br/>
    <button id="btn">I hide a column, click me</button>