gpt4 book ai didi

javascript - 如何使用普通 javascript 动态隐藏表格单元格内容?

转载 作者:行者123 更新时间:2023-11-27 23:28:01 26 4
gpt4 key购买 nike

我正在用纯 JavaScript 创建一个表,并使用 onClick 监听器事件以两种方式填充它 - 单击外部按钮或单击其中一个单元格本身。我无法隐藏我的内容动态表格单元格,即我想在它们中呈现值时隐藏它们,我想稍后在其他事件中取消隐藏/显示。

我已经尝试过可用的常规方法,即

td {display: none;},td {visibilty: hidden}

我也尝试过内联 CSS 样式方法来隐藏单元格内容,但是所有这些方法都会使表格本身变空白,即消除单元格边框本身。

<body>
<div class="container-fluid">
<table id="myelement">
<tr>
<td>&nbsp;</td>
... .... ...
<td>&nbsp;</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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com