使用JavaScript隐藏HTML表格行<tr>，使其不占用空间。

Question

使用JavaScript隐藏HTML表格行<tr>，使其不占用空间。

3

我正在使用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);

            }

如何隐藏行使其不占用任何空间？

- Nom

3

隐藏：tr.style.display = 'none'; 取消隐藏：tr.style.display = ''; - Jaromanda X

我正在做的是：tr.style.visibility = "none"; 但它仍然占用空间。 - Nom

1

你能看出我说的话和你正在做的事情之间的区别吗？display !== visibility - Jaromanda X

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Senjuti Mahapatra · Accepted Answer

将 tr.style.visibility = "none"; 改成 tr.style.display = 'none' 使用 display:none ，tr 不会在页面中显示，也不会占用页面空间，我们可以通过DOM与 tr 进行交互。

使用 visibility:hidden ，tr 不可见但仍然占用页面分配给它的空间，这意味着 tr 在页面上被渲染但似乎是不可见的。