使用 JavaScript 动态隐藏/显示表格列答案

【问题标题】：Hide/Show table columns dynamicly with JavaScript使用 JavaScript 动态隐藏/显示表格列
【发布时间】：2017-03-23 06:47:20
【问题描述】：

我有一个按钮，当我按下它时，我必须在我的表格中显示一个隐藏的列。但我的问题是我只显示一行。

<a href="#" class="btn-xl btn-default" id="btn_callkit" onclick="call();return false;" style="width: 150px;color: white;">KIT</a> 
 <table id="example0" class="table  table-striped">

        <br/>
            <thead>
                <tr>
                    <th id="kit_head" style="display:none;">KIT</th>
                    <th>Material</th>
                    <th>Info</th>
                 </tr>
             </thead>

                    <?php
                        $rol = mysql_query("SELECT * from pg  WHERE pg.dataset = 2 ");
                            if (mysql_num_rows($rol) != 0) { 
                                while($item = mysql_fetch_array($rol)) { 


                                    $id = $item['id'];  
                                    $info = $item['info'];  
                                    $code = $item['lote_code'];
                    ?>

             <tr id="infodata_<?=$id;?>">


                    <td id="line" style="display:none;">

                        <div class="checkbox  checkbox-circle" style="text-align:center;margin-top:40px;">
                            <input id="check_<?=$id;?>" type="checkbox">
                            <label for="check_<?=$id;?>">

                            </label>
                        </div>

                    </td>

                    <td><?php echo $info;?></td>

                    <td><?php echo $code;?></td>


                </tr>
        <? }} ?>
        </tbody>
        </table>

我的 Javascript 有这个代码：

function call()
{
    document.getElementById('kit_head').style.display = 'block'; 
    document.getElementById('line').style.display = 'block'; 
}

我可以做些什么来显示我的数据库里面的所有行？

【问题讨论】：

尝试使用class 而不是id，例如使用<th class="toggleColumn" 和document.getElementByClass('toggleColumn')
您正在专门更改 ID 为“Line”和“kit_head”的第一个元素的显示。相反，您可以使用包装

标签： javascript php html-table

【解决方案1】：

您正在使用单元格 line 的 ID。

getElementById - 顾名思义 - 将返回单个元素，这将始终为真，因为 ID 旨在供一次性使用。所以你的代码：

document.getElementById('line').style.display = 'block';

正在获取第一个匹配元素并按照定义设置样式属性。

相反，您应该使用class，它旨在指定许多相关元素或共享共同规则的元素。

然后你可以获取所有匹配的元素，遍历它们并设置所需的样式属性。

DOM API 公开了许多通过类名检索元素的方法，您应该查阅您打算支持的浏览器版本列表并从可用的技术中选择合适的技术。

编辑： 作为旁注，KennyDope 说最佳实践通常是切换类以操纵样式是正确的。与内联样式相比，跟踪和修改类要容易得多。

【讨论】：

这是正确答案。当元素名称将被重用时，请始终使用类。
我的问题是现在出现“Uncaught TypeError: document.getElementByClass is not a function”
因为这不是一个有效的方法，可能是另一个答案的错字。查看 Mozilla Developer Network 上的文档。
我想到的几个选项是 getElementsByClassName querySelector querySelectorAll 注意这些方法返回什么以及如何迭代结果，这并不总是直观的。

【解决方案2】：

id 属性在页面上必须是唯一的。

反之，class属性顾名思义就是一类对象，多个对象可以共享同一个类。

因此，如果要显示/隐藏列，则必须将每行中的特定 <td> 分配给同一类，然后由 Javascript 使用 getElementByClassName 对其进行操作。

注意，getElementByClassName 返回一个对象数组，您必须遍历数组才能更改每个对象的显示样式。

【讨论】：

【解决方案3】：

最佳做法是切换类而不是内联样式。

您的代码将如下所示：

<table class="table table-striped">
    <tr>
        <td class="toggle">Toggle field</td>
        <td class="toggle">Toggle field</td>
        <td>Other field</td>
    </tr>
</table>

<button id="btn_callkit">toggle</button>

<script>
   function toggle (t) {
        var listTd = document.getElementsByClassName("toggle");
        var i;

        for (i = 0; i < listTd.length; i++) {           
            listTd[i].classList.toggle('hidden');
        }           
    }

    document.getElementById('btn_callkit').addEventListener('click', toggle);
</script>

【讨论】：