使用 javascript 隐藏部分表格而不更改表格布局答案

【问题标题】：hiding part of table using javascript without changing the table layout使用 javascript 隐藏部分表格而不更改表格布局
【发布时间】：2013-10-07 17:04:40
【问题描述】：

编辑：好的，我将脚本标签中的所有内容都放在了

$(document).ready(function) {

所以现在 eventTd 确实隐藏了。

我有一张桌子，代码如下

<table>
    <tr>
        <td>itemOne</td>
        <td class="evenTd">itemTwo</td>
    </tr>
</table>

现在，我希望它在开始时，第一个 td 是唯一可见的 td（eventTd 中的任何内容都不应该是可见的）。之后，我想要它，以便当您单击第一个 td (itemOne) 时 itemTwo 会滑动并出现。到目前为止我有

$(document).ready(function() {
    $('.evenTd').hide();
});

它隐藏了 eventTd，但是，现在没有 eventTd 类的 td 占据了整个屏幕。如何做到让布局不改变？

【问题讨论】：

在这里工作正常jsfiddle.net/j08691/4GW38。您要么不包括 jQuery，要么在表存在之前运行代码。
以防万一，你知道api.jquery.com/even-selector吗？
好吧原来我需要 document.ready 函数。我知道那个选择器，只是暂时不想使用它，但是谢谢。
“非隐藏 td 类中的另一个 td”。您发布的代码与此不匹配。一个 TD 不在另一个里面。
@j08691 抱歉，我改写了这个问题

标签： javascript jquery html css show-hide

【解决方案1】：

如果这是您的全部代码，并且它出现在相关元素之前（无论是在head 还是body 元素中，问题是脚本在DOM 之前运行节点存在。

因此，您可以或者将其放在$(document).ready()：

<script> 
    $(document).ready(function(){   
        $('.evenTd').hide();
    });
</script>

或者将脚本放在元素之后，在 HTML 中，您要对其进行操作。

<body>
    <table>
        <tr>
            <td>itemOne</td>
            <td class="evenTd">itemTwo</td>
        </tr>
    </table>
    <script>    
        $('.evenTd').hide();
    </script>
</body>

但请记住，添加和删除单个表格单元格可能会导致布局问题，最好隐藏相关 td 的后代元素，而不是 td 本身。

例如，给定当前的 HTML：

<table>
    <tr>
        <td>itemOne</td>
        <td class="evenTd"><div>itemTwo</div></td>
    </tr>
</table>

还有：

$(document).ready(function(){   
    $('.evenTd').hide();
});

这给出：demo，导致单个可见 td 占据整个行空间。

使用上面的 HTML 和下面的 jQuery：

$(document).ready(function(){   
    $('.evenTd div').hide();
});

这给出了：demo，它仍然演示了布局更改（因为在 td 内部没有可显示的视觉内容），但 td 仍然可见（所以这是一个稍微小的变化）。

下面的 jQuery 只是简单地将 td 的内容“隐藏”（因此它在页面上不可见，但仍然“存在”占用文档流中的空间）：

$(document).ready(function(){   
    $('.evenTd div').css('visibility','hidden');
});

这给出：demo。

但是，如果要在某个时候恢复这种可见性，我当然更愿意在 td 本身上添加或删除一个类，并使用 CSS 来解决每个状态的细节：

$(document).ready(function(){   
    $('.evenTd').addClass('hidden');
    $('tr').on('click', 'td.evenTd', function(){
        $(this).toggleClass('hidden');
    });
});

JS Fiddle demo.

【讨论】：

对，当我隐藏 eventTd 时，它确实导致了布局更改。你说的“隐藏后代元素”是什么意思。我该怎么做呢？

【解决方案2】：

在执行任何操作之前，您需要等待 DOM：

<script type="JavaScript">
jQuery(document).ready(function(){
     jQuery('td').hide().click(function(){
          jQuery('td.visible').toggle().removeClass('visible');
          jQuery(this).toggle().addClass('visible');
     });
     jQuery('td')[1].show().addClass('visible');
 </script>

要显示和隐藏元素，您可以使用 toggle() 方法。

【讨论】：

jQuery('td')[1].show().addClass('visible'); 不应该工作，因为HTMLTDElement has no method 'show'，也许你的意思是eq()？

【解决方案3】：

<td id="cell32">cell data</td>

cell32 = document.getElementById("cell32");
cell32.style.display = "none";

【讨论】：