jQuery：当我在 FF3 和 Chrome 中测量隐藏的表格单元格的高度时，为什么隐藏的表格单元格会（某种程度上）再次显示

发布于 2024-07-12 10:42:04 字数 1863 浏览 6 评论 0原文

我可以使用 jQuery 成功隐藏一些表格单元格。然后，当我测量隐藏单元格的高度时，如果不隐藏该单元格将占据的空间显示为空白，将该行中的所有剩余单元格推过一列。就好像单元格被重新插入到表格流中，但其内容被隐藏。下面的例子演示了这个问题。单击“隐藏第 2 列”，然后单击“测量第 1 行第 2 列”以查看其发生情况。示例代码是独立的 - 只需将其另存为 HTML 文件即可。

这会影响 FF3 和 Chrome，但不会影响 IE7。

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("a.clickToHide").click(function() { 
                $(".col2").hide(); 
            });
            $("a.clickToMeasure").click(function() { 
                $("span.result").text($("tr.row1 td.col2").height()); 
            });
        });
    </script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th class="col1"> Column 1 </th>
                <th class="col2"> Column 2 </th>
                <th class="col3"> Column 3 </th>
            </tr>
        </thead>
        <tbody>
            <tr class="row1">
                <td class="col1"> Column 1 </th>
                <td class="col2"> Column 2 </th>
                <td class="col3"> Column 3 </th>
            </tr>
            <tr class="row2">
                <td class="col1"> Column 1 </th>
                <td class="col2"> Column 2 </th>
                <td class="col3"> Column 3 </th>
            </tr>
        </tbody>
    </table>
    <a class="clickToHide" href="#">Click to hide column 2</a> <br />
    <a class="clickToMeasure" href="#">Click to measure row 1 column 2</a> <br />
    <span class="result"></span>
</body>

原文

I can successfully hide some table cells using jQuery. When I then measure the height of a hidden cell, the space that the cell would occupy if not hidden appears as blank space, pushing all the remaining cells in that row across by one column. It's as if the the cell is reinserted in the table flow, but its content is hidden. The example below demonstrates the problem. Click "hide column 2" followed by "measure row 1 column 2" to see it happen. The example code is standalone - just save it as an HTML file.

This affects FF3 and Chrome, but not IE7.

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("a.clickToHide").click(function() { 
                $(".col2").hide(); 
            });
            $("a.clickToMeasure").click(function() { 
                $("span.result").text($("tr.row1 td.col2").height()); 
            });
        });
    </script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th class="col1"> Column 1 </th>
                <th class="col2"> Column 2 </th>
                <th class="col3"> Column 3 </th>
            </tr>
        </thead>
        <tbody>
            <tr class="row1">
                <td class="col1"> Column 1 </th>
                <td class="col2"> Column 2 </th>
                <td class="col3"> Column 3 </th>
            </tr>
            <tr class="row2">
                <td class="col1"> Column 1 </th>
                <td class="col2"> Column 2 </th>
                <td class="col3"> Column 3 </th>
            </tr>
        </tbody>
    </table>
    <a class="clickToHide" href="#">Click to hide column 2</a> <br />
    <a class="clickToMeasure" href="#">Click to measure row 1 column 2</a> <br />
    <span class="result"></span>
</body>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空‖城人不在 2024-07-19 10:42:04

对此进行研究时得到了有趣的结果。首先，您可以通过完善选择器来完成您想要的任务。

其次，我决定深入研究 jquery 源代码以了解选择器导致问题的原因。我发现表格单元格变得可见“display: block;” 在“交换”功能中。看来这样做确实得到了正确的计算（评论）。在使其可见并正确执行计算后，该函数会尝试恢复可见状态。但反转并不影响。我认为这绝对是浏览器问题，因为对象值是准确的。

回复收藏 0 原文

⊕婉儿 2024-07-19 10:42:04

我今天也刚刚发现这个问题（Chrome 12.0.742.91。）这是我可以制作的最简单的有效代码来演示这个问题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Chrome table cell bug</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $(document.body).click(function() {
                    $('tr:first>td:last').css('width');
                });
            });
        </script>
        <style type="text/css">
            thead td { padding-bottom: 100px; background-color: red; }
        </style>
    </head>
    <body>
        <table style="width: 100%;">
            <thead>
                <tr>
                    <td></td>
                    <td style="display: none;"></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td style="display: none;"></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

当页面加载时，单击红色栏上的某个位置（所有 TD 都有红色 BG），然后通过测量隐藏单元格的宽度，红色条将被压缩。

我可能会向 jQuery 和/或 Google 报告此问题，但目前我所做的解决方法是将 $el.width() 替换为 $el.is(':visible') ？ $el.width() : 0 用于可能隐藏的表格单元格。

I just found this issue today as well (Chrome 12.0.742.91.) Here's the simplest valid code I could make that demonstrates the issue:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Chrome table cell bug</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $(document.body).click(function() {
                    $('tr:first>td:last').css('width');
                });
            });
        </script>
        <style type="text/css">
            thead td { padding-bottom: 100px; background-color: red; }
        </style>
    </head>
    <body>
        <table style="width: 100%;">
            <thead>
                <tr>
                    <td></td>
                    <td style="display: none;"></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td style="display: none;"></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

When the page loads, click somewhere on the red bar (all TDs have red BG), and just by measuring the width of a hidden cell, the red bar will get compressed.

I may report this to jQuery and/or Google, but for now the workaround I did was to replace $el.width() with $el.is(':visible') ? $el.width() : 0 for table cells that may be hidden.

回复收藏 0 原文

~没有更多了~