jQuery: почему скрытые ячейки таблицы снова (вроде) отображаются, когда я измеряю их высоту в FF3 и Chrome - PullRequest
Новая
       13

jQuery: почему скрытые ячейки таблицы снова (вроде) отображаются, когда я измеряю их высоту в FF3 и Chrome

1 голос
/ 14 января 2009

Я могу успешно скрыть некоторые ячейки таблицы, используя 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>

Ответы [ 2 ]

1 голос
/ 09 июня 2011

Я только что нашел эту проблему и сегодня (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 для ячеек таблицы, которые могут быть скрыты.

1 голос
/ 14 января 2009

Интересные результаты, глядя на это. Во-первых, вы можете выполнить то, что вы хотите, улучшив свой селектор.

Во-вторых, я решил покопаться в источнике jquery, чтобы понять, почему ваш селектор вызывает проблему. Я обнаружил, что ячейка таблицы становится видимой "display: block;" в функции «своп». Похоже, для этого нужно получить правильные расчеты (комментарии). После того, как это сделано видимым и вычисления выполнены правильно, функция пытается вернуть видимый статус обратно. Но задний ход не влияет. Я думаю, что это определенно проблема браузера, потому что значения объекта точны.

...