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

Question

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

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