скрытие части таблицы с использованием JavaScript без изменения макета таблицы

0

EDIT: хорошо, я положил все в теге скрипта в

$(document).ready(function) {

Итак, теперь evenTd скрывается.

У меня есть таблица, и код ниже

<table>
    <tr>
        <td>itemOne</td>
        <td class="evenTd">itemTwo</td>
    </tr>
</table>

Теперь, я хочу, чтобы в начале, первый td является единственным td, который является видимым (что-либо в evenTd не должно быть видимым). После этого я хочу, чтобы при щелчке по первому td (itemOne), затем itemTwo соскальзывает и появляется. До сих пор

$(document).ready(function() {
    $('.evenTd').hide();
});

и он скрывает evenTd, однако теперь td, которые не имеют класса evenTd, занимают весь экран. Как сделать так, чтобы макет не изменился?

  • 2
    Здесь отлично работает jsfiddle.net/j08691/4GW38 . Вы либо не включаете jQuery, либо запускаете код до того, как таблица существует.
  • 2
    На всякий случай, знаете ли вы о api.jquery.com/even-selector ?
Показать ещё 3 комментария
Теги:
show-hide

3 ответа

3
Лучший ответ

Если это весь код вашего кода, и это появляется перед соответствующими элементами (будь то в элементе 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');
});

Это дает: demo.

Однако я бы предпочел, конечно, если в какой-то момент эта видимость должна быть восстановлена, добавить или удалить класс по самому td и использовать CSS для определения специфики каждого состояния:

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

Демо-версия JS Fiddle.

  • 0
    Правильно, это вызвало изменения макета, когда я спрятал EvenTd ... что вы подразумеваете под "скрытием элементов-потомков" ... как бы я поступил так?
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().

  • 0
    jQuery('td')[1].show().addClass('visible'); не должен работать, так как HTMLTDElement has no method 'show' , возможно, вы имели в виду eq() ?
-2
<td id="cell32">cell data</td>

cell32 = document.getElementById("cell32");
cell32.style.display = "none";

Ещё вопросы

Сообщество Overcoder
Наверх
Меню