我正在用纯 JavaScript 创建一个表，并使用 onClick 监听器事件以两种方式填充它 - 单击外部按钮或单击其中一个单元格本身。我无法隐藏我的内容动态表格单元格，即我想在它们中呈现值时隐藏它们，我想稍后在其他事件中取消隐藏/显示。
我已经尝试过可用的常规方法，即
td {display: none;}, 和 td {visibilty: hidden}
我也尝试过内联 CSS 样式方法来隐藏单元格内容，但是所有这些方法都会使表格本身变空白，即消除单元格边框本身。
<body>
<div class="container-fluid">
<table id="myelement">
<tr>
<td> </td>
... .... ...
<td> </td>
</tr>
</table>
</div>
</body>
<script>
...
for(let i=0;i<mycount;i++){
for(var t=0;t< Math.floor(Math.random()*td.length);t++){
td[n[i]].firstChild.nodeValue='X';
}
}
...
</script>
所有可用的技术都会使表格本身变空白，即消除单元格本身的边框。
最佳答案
有多种方法可以做到这一点，根据表格单元格的内容，其他一些方法可能会更好。但假设它只是文本，隐藏单元格内容的一种方法是使单元格的 fontSize 等于 0。请参见以下示例:
hide.addEventListener("click", function(event) {
document.getElementById("table").rows[1].cells[1].style.fontSize = 0;
});
show.addEventListener("click", function(event) {
document.getElementById("table").rows[1].cells[1].style.fontSize = null;
});table, td, th {
border: 1px solid black;
}<table id="table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<button id="hide">Hide Cell "Smith"</button>
<button id="show">Show Cell "Smith"</button>关于javascript - 如何使用普通 javascript 动态隐藏表格单元格内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57645902/