用js隐藏HTML表行<tr>从而不占用空间
hide with js an HTML table row <tr> so that it takes up no space
我正在用javascript在表中创建行。当我试图隐藏这些行时,它会隐藏该行,但该行的空间仍然被占用。我的代码:
for (var i = 0; i < 8; i++) {
isHide = false;
if(i<3)
isHide = true;
var table = document.getElementById("table");
var tr = document.createElement("TR");
if (isHide == true) {
tr.style.visibility = "none";
}
else {
tr.style.visibility = "visible";
}
table.appendChild(tr);
var td1 = document.createElement("TD");
var td2 = document.createElement("TD");
tr.appendChild(td1);
tr.appendChild(td2);
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = i;
checkbox.value = i;
checkbox.id = i;
var label = document.createElement('label')
label.htmlFor = i;
label.appendChild(document.createTextNode(i.toString()));
if (isHide == false){
var mybr = document.createElement('br');
}
td1.appendChild(label);
td2.appendChild(checkbox);
}
如何以不占用任何空间的方式隐藏行?
将tr.style.visibility = "none";
更改为tr.style.display = 'none'
有了display:none
,就不会为tr
分配空间,因为tr
不会出现在页面上,我们可以通过DOM与tr
交互。
对于visibility:hidden
,tr
不可见,但它占用了分配给它的空间。这意味着tr
在页面上呈现,但似乎不可见。
相关文章:
- 不带按钮的引导输入组文本占用一半空间
- 分区占用屏幕的总空间
- 如何使输入占用行中所有可用空间
- 动态隐藏列表中的元素,而隐藏的元素不会占用页面上的空白空间
- 在使用 jQuery 在鼠标悬停时淡入之前.如何让隐藏元素占用空间
- 如何使显示:无显示:块元素不占用其在DOM中的原始空间
- 在未占用空间中放置仪表板面板的算法
- 隐藏可见性会隐藏图像,但仍会显示隐藏元素占用的空间
- 面板在 ExtJs 中占用不必要的巨大空间
- 在磁盘上做一个JSON文件,当加载到内存中的var中时,会占用相同的空间
- 用js隐藏HTML表行<tr>从而不占用空间
- (选择)显示后仍占用空间的元素:无
- 检查<p>标签占用
- 在html中占用一些额外空间的标签
- ReCaptcha不是't用铬显示(或占用空间)
- 如何在不占用空间的情况下隐藏元素,同时还能响应事件
- 显示none占用空间
- 隐藏场占用空间
- 粘性导航条需要占用空间
- 如何阻止假定不可见的javascript占用空间