Скрытие всей таблицы изменяет размер - PullRequest
2 голосов
/ 17 февраля 2009

Наличие HTML-страницы с простой таблицей и js-кодом для показа / скрытия на ней:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>title</title>
    <script type="text/javascript">


    function showErrorSteps()
    {        
        var el = document.getElementById("t1");

        if(el.style.display=="none")
        {
            el.style.display="block";
        }
        else
        {
        el.style.display="none";
        }                                               
    }

    </script>
</head>
<body>

<br />
<span onclick="showErrorSteps()">[click]</span>
<br />
<br />

<table id="t1" border="1" width="100%" style="table-layout: fixed">
<tr>
    <td>s</td>
    <td>d</td>
    <td>a</td>
</tr>
</table>        
</body>
</html>

Что происходит, так это то, что в Mozilla размер таблицы изменяется после двойного щелчка (даже с макетом таблицы: исправлено css). IE отлично работает.

Ответы [ 3 ]

6 голосов
/ 17 февраля 2009

Таблицы не должны быть установлены на display: block. Строки и ячейки таблицы тоже не должны. Они имеют разные значения дисплея. Мой совет? Не делай так. Используйте класс:

.hidden {
  display: none;
}

и динамически добавьте его и удалите из таблицы, чтобы избежать проблем с установкой правильного типа отображения для отображаемого элемента.

Редактировать: Чтобы уточнить комментарий о том, почему так и что происходит. Попробуйте это:

<table>
<tr>
  <td>Cell 1</td>
  <td style="display: block;">Cell 2</td>
</tr>
</table

Это будет (или должно) испортить ваш стол. Почему, потому что элемент <td> по умолчанию имеет display: table-cell, а не block. Таблицы одинаковые. У них есть display: table.

Сброс атрибутов CSS ... проблематичен.

Таким образом, вам лучше всего использовать классы для установки и сброса атрибутов. Его легче изменить (класс находится в файле CSS и не является кодом), он позволяет избежать проблем, таких как установка значения обратно на правильное исходное значение, и обычно обеспечивает более чистое решение, особенно при использовании с такой библиотекой, как jQuery. В jQuery вы можете сделать:

$("table").toggleClass("hidden");

Готово.

Или вы можете использовать addClass() и removeClass(), если это более уместно. Например:

<input type="button" id="hide" value="Hide Table">
...
<table id="mytable">
...

и

$(function() {
  $("#hide").click(function() {
    if ($("#mytable").is(".hidden")) {
      $("#hide").val("Hide Table");
      $("#mytable").removeClass("hidden");
    } else {
      $("#hide").val("Show Table");
      $("#mytable").addClass("hidden");
    }
  });
});

И вот у вас есть надежное, краткое и простое для понимания решение (как только вы разберетесь с синтаксисом jQuery, который не займет много времени).

Возиться с Javascript напрямую - это так 2002.: -)

1 голос
/ 17 февраля 2009

Это не прямой ответ на ваш вопрос, а серьезная рекомендация. Недавно я обнаружил радости JQuery . Все эти вещи могут быть сделаны без особых усилий, и есть множество онлайн примеров и ссылок.

Если у вас нет времени, чтобы заняться этим сейчас, то я уверен, что кто-то предложит здесь решение, но я бы порекомендовал любому, кто делает что-либо, кроме самых простых манипуляций с DOM JavaScript, рассмотреть JQuery (или подобную инфраструктуру ).

JQuery предлагает независимые от браузера методы Hide (), Show () и Toggle (). Вот одна из моих любимых ссылок .

0 голосов
/ 17 февраля 2009

Это может быть потому, что вы установили style.display в значение «block». Попробуйте установить его на "". Вы также должны установить ширину таблицы с помощью CSS. (ширина: 100%;)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...