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

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

<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>

---

如何显示数据库中的所有行

您正在使用单元格的ID

行

getElementById

——顾名思义——将返回单个元素，这将始终是真的，因为ID仅用于一次使用。因此，您的代码：

document.getElementById（'line'）.style.display='block'

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

相反，您应该使用
类
，该类用于指定许多相关元素或共享公共规则的元素

然后，您可以获得所有匹配的元素，在它们上循环并设置所需的样式属性

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

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

然后，您的代码将如下所示：

<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>


切换字段
切换字段
其他领域
切换
功能切换（t）{
var listTd=document.getElementsByClassName（“切换”）；
var i；
对于（i=0；i
id
属性在页面上必须是唯一的

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

因此，如果要显示/隐藏列，则必须将每行中特定的
设为同一个类，然后由Javascript使用
getElementByClassName
对其进行操作

注意，
getElementByClassName
返回一个对象数组，您必须遍历该数组才能更改每个数组中的显示样式
 尝试使用
类
而不是
id
，例如，使用
可以特别更改id为“Line”和“kit_head”的第一个元素的显示。相反，你可以用这个包裹。这是正确的答案。在重用元素名称时始终使用类。我的问题是，现在它显示为“Uncaught TypeError:document.getElementByClass不是函数”，因为这不是有效的方法，可能是另一个答案的输入错误。看看Mozilla开发者网络上的文档。我脑海中有几个选项是
getElementsByClassName
querySelector
querySelectorAll
注意这些方法返回的内容以及如何迭代结果，这并不总是直观的。
function call()
{
    document.getElementById('kit_head').style.display = 'block'; 
    document.getElementById('line').style.display = 'block'; 
}

<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>