1

我可以使用 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>

4

2 回答 2

1

研究这个的有趣的结果。首先，您可以通过优化选择器来完成您想要的。

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

于 2009-01-14T16:24:08.100 回答
1

我今天也发现了这个问题（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可能隐藏的表格单元格。

于 2011-06-09T02:02:31.920 回答