用js隐藏HTML表行<tr>，以使其不占用空间

nom 发表于 Dev

姓

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

            }

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

Senjuti Mahapatra

更改tr.style.visibility = "none";为tr.style.display = 'none'

使用display:none，将不会为分配空间，tr因为tr不会出现在页面上，我们可以tr通过DOM与进行交互。

随着visibility:hidden的tr是不可见的，但它占用分配给它的空间。这意味着它tr在页面上呈现，但似乎不可见。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。