1

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

$(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 占据了整个屏幕。我怎样才能使布局不改变？

4

3 回答 3

4

如果这是您的全部代码，并且它出现在相关元素之前（无论是在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');
});

这给出了：演示。

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

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

JS 小提琴演示。

于 2013-10-07T17:08:04.083 回答
1

在执行任何操作之前，您需要等待 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()方法。

于 2013-10-07T17:12:38.750 回答
-1 
<td id="cell32">cell data</td>

cell32 = document.getElementById("cell32");
cell32.style.display = "none";
于 2013-10-07T17:08:20.340 回答