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

Question

我有一个 web 应用程序和返回一个包含多列的表的结果页面，我希望我的按钮隐藏或显示该列。

我尝试创建一个执行此操作的函数，然后调用该函数 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>

在这种格式中，它只隐藏/显示数据管理员列标题，而不是整个列

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";
    }
  }
}