По какой-то причине не могу показать / скрыть строки таблицы, такие как div

Question

Я использовал animatedcollapse для моих слайдеров div без недостатков.Однако теперь мне нужно использовать ползунок строки таблицы, и он совсем не работает.Вот часть таблицы, которую я использую, чтобы вы получили представление.

<table>

Ответить на сообщение ...

   </div>
    <script type="text/javascript">

            $(document).ready(function () {
                var editor = CKEDITOR.replace( 'newsfeed_status7',
                           {
                                   toolbar :
                                   [
                                          ['Bold', 'Italic', 'Underline', '-', 'Font', 'FontSize', '-', 'Undo', 'Redo', '-', 'MediaEmbed','Smiley', 'SpellChecker', 'Find','Replace']
                                   ],
                                   height: '50px'
                           });

            });

    </script>
        <table width="100%">
            <tr>
                <td align="left" width="25%" style="padding-left:15px;"></td>
                <td align="left" width="25%"></td>
                <td align="right"></td>

                <td align="right" width="20%" style="padding-right:15px;"><input type="submit" value="Reply To Post" class="submitbtn" /></td>
            </tr>
        </table>
    </td>
</tr>                        

Ответить 07/11/10 03: 12: 20 PM

Вот что находится в файле нижнего колонтитула:

<script type="text/javascript">
animatedcollapse.addDiv('tr7', 'fade=1') animatedcollapse.addDiv('tr6', 'fade=1') animatedcollapse.addDiv('tr4', 'fade=1') animatedcollapse.addDiv('tr2', 'fade=1') animatedcollapse.addDiv('tr1', 'fade=1') animatedcollapse.ontoggle=function($, divobj, state){}
animatedcollapse.init()
</script>

Answer 1

Предполагая, что animatedcollapse - это анимация, которая работает, устанавливая overflow: hidden для элемента и затем изменяя его height, я боюсь, что переполнение просто не будет работать со строками таблицы из-за их необычного / необычного расположения модель (во всяком случае, в большинстве браузеров и в большинстве случаев).

Чтобы это сработало, вам нужно разбить эту строку на собственную таблицу. Затем, для большей совместимости, вы можете поместить таблицу, которая должна скрываться внутри <div>, и выполнить переполнение / анимацию для div.

Поскольку теперь у вас есть несколько таблиц (три, если ранее были строки до и после целевой строки), вам необходимо убедиться, что их столбцы выстроены в линию, чтобы они выглядели как одна таблица. Это должно быть сделано путем присвоения таблицам стиля table-layout: fixed; width: 100%; (и последующего определения размера любых столбцов, для которых требуется ширина, отличная от других, со стилем width для ячеек в первой строке или набора элементов <col>) .

table-layout: fixed в любом случае, как правило, предпочтительнее, так как он работает быстрее и более предсказуемо в кросс-браузерном режиме, чем алгоритм автоматической разметки таблиц по умолчанию.

Answer 2

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

Вам нужно будет вложить еще одну таблицу в первую ячейку таблицы. Вот так:

table
    tr
      td class="show-hide"
        table
            tr
                td
                td
                td

и т.д ...

Оттуда вы можете назначить вашу любимую анимацию «показать-скрыть» ячейке таблицы, которую я пометил «показать-скрыть».

Или более простое применение этого - вывести строки в виде div (вместо tr), а затем в таблицу внутри, чтобы получить вашу структуру.

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

Надеюсь, это поможет.

Чтобы быть полностью совместимым с xhtml, я бы использовал "dl" вместо "table".