Как показать / скрыть весь столбец при нажатии кнопки? - PullRequest
Новая
       42

Как показать / скрыть весь столбец при нажатии кнопки?

1 голос
/ 01 октября 2019

У меня есть веб-приложение и страница результатов, которая возвращает таблицу с несколькими столбцами. Я хочу, чтобы моя кнопка скрывала или отображала столбец.

Я попытался создать функцию, которая делает это, а затем вызвать функцию 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, а не весь столбец

1 Ответ

1 голос
/ 01 октября 2019

Вы можете дать td, который вы хотите показать / скрыть, того же класса. Предполагая, что вы хотите сделать это для Data Stewards, это может выглядеть примерно так:

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