Блог

Главная - Вопросы по программированию - Форматирование, складываемое внутри таблицы

Форматирование, складываемое внутри таблицы

#javascript #html #jquery

Вопрос:

Это относится к вопросу, который я вчера опубликовал о сворачиваемых элементах, и у меня возникла проблема с интервалом (и, возможно, форматированием, если я делаю это неправильно).

Все мое кодирование работает нормально, если я хочу, чтобы все объекты под сворачиваемой частью отображались в списке вертикально. Обычно они расположены на расстоянии друг от друга в таблице, такой как приведенная ниже, чтобы они могли проходить по вертикали три раза вниз по странице, насколько это необходимо. Это появляется в моем jfiddle, но не работает. Кажется, что он «подпрыгивает», но на самом деле не сворачивается и не расширяет содержимое, и я не на 100% уверен, как это исправить.

 $('.expand-two').click(function() {
  $('.content-two').slideToggle('slow');
}); 
 p.content-one {
  display: block;
}

p.content-two {
  display: block;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table border="0" width="750">
  <tr>
    <td align="center" colspan="3">
      <p class="expand-two">
        <a href="#"></a> <img src="https://www.mywebsite.net/random/creative.png"><br><br></p>
    </td>
    <tr>
      <p class="content-two">
        <td width="33%" align="center" valign="top">
          <a href="http://www.mywebsite.net/random/sinnerssaints" title="Sinners and Saints: Room Leader OMEGA">
            <font color="#34a6a7">[ c h a o s ]</font>
          </a><br>
          <font color="#34a6a7">$ROOMNAME sinnerssaints



lt;/font><br>$USERLIST sinnerssaints




lt;br>

        </td>

        <td width="33%" align="center" valign="top">

          <a href="http://www.mywebsite.net/random/sagas_untold" title="Saga's Untold: Room Leader AETERNUM">

            <font color="#34a6a7">[ r e a l i t i e s ]</font>

          </a><br>

          <font color="#34a6a7">$ROOMNAME sagas_untold




lt;/font><br>$USERLIST sagas_untold




lt;br>

          <font size="-1" color="#CFA06B"><i>$ROOMNAME sagbloodonthemarble




lt;/i></font><br>$USERLIST sagbloodonthemarble




lt;br>

          <font size="-1" color="#CFA06B"><i>$ROOMNAME sagasvalar




lt;/i></font><br>$USERLIST sagasvalar




lt;br>

        </td>

        <td width="33%" align="center" valign="top">

          <a href="http://www.mywebsite.net/random/parabellum" title="Parabellum: Room Leader COVET">

            <font color="#34a6a7">[ w a r z o n e ]</font>

          </a><br>

          <font color="#34a6a7">$ROOMNAME parabellum




lt;/font><br>$USERLIST parabellum




lt;br>

        </td>

      </p>

    </tr>

  </tr>

</table> 





Рабочая Скрипка 

https://jsfiddle.net/zwom1ba0/


Редактировать


Я имею в виду, что мои ряды расположены так


 item 1             item 2             item3
item 4             item 5             item6
 


И т.д., Но когда помещается в div без кодирования таблицы, все это работает, но элементы в каждом div просто выглядят так


 "item1"
"item2"
"item3"
"item4"
 


и т.д.




Комментарии:


1.  «Они обычно расположены на расстоянии друг от друга в таблице, такой как приведенная ниже, чтобы они могли проходить по три по вертикали вниз по странице, насколько это необходимо». — «три по вертикали вниз…» не имеет смысла.   «Это появляется в моем jfiddle, но не работает». также сбивает с толку.   Если вы пытаетесь изменить количество элементов в строке, в таблице, то это     очень    сложно.   Гораздо проще не использовать таблицу.  


2.  отредактировал мой вопрос, чтобы вы, надеюсь, прояснили, что я имел в виду.  


Ответ №1:




Проблема  <p class="content-two">  в том, что находится между  <tr> -> <td> 


Элемент  <tr>  HTML определяет строку ячеек в таблице. Ячейки строки затем могут быть установлены с использованием сочетания элементов  <td>  (ячейка данных) и  <th>  (ячейка заголовка).


Кроме того, ваш первый  <tr>  тег не закрыт  </tr>  , затем идет другой  <tr> 


Предлагаемое решение:


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


 <table border="0" width="750">
  <tr>
    <td align="center" colspan="3">
      <p class="expand-two">
        <a href="#"></a> <img src="https://www.mywebsite.net/random/creative.png"><br><br></p>
    </td>
  </tr>
</table>
<div class="content-two">
  <table border="0" width="750" >
    <tr>
      <td width="33%" align="center" valign="top">
        <a href="http://www.mywebsite.net/random/sinnerssaints" title="Sinners and Saints: Room Leader OMEGA">
          <font color="#34a6a7">[ c h a o s ]</font>
        </a><br>
        <font color="#34a6a7">$ROOMNAME sinnerssaints



lt;/font><br>$USERLIST sinnerssaints




lt;br>

      </td>

      <td width="33%" align="center" valign="top">

        <a href="http://www.mywebsite.net/random/sagas_untold" title="Saga's Untold: Room Leader AETERNUM">

          <font color="#34a6a7">[ r e a l i t i e s ]</font>

        </a><br>

        <font color="#34a6a7">$ROOMNAME sagas_untold




lt;/font><br>$USERLIST sagas_untold




lt;br>

        <font size="-1" color="#CFA06B"><i>$ROOMNAME sagbloodonthemarble




lt;/i></font><br>$USERLIST sagbloodonthemarble




lt;br>

        <font size="-1" color="#CFA06B"><i>$ROOMNAME sagasvalar




lt;/i></font><br>$USERLIST sagasvalar




lt;br>

      </td>

      <td width="33%" align="center" valign="top">

        <a href="http://www.mywebsite.net/random/parabellum" title="Parabellum: Room Leader COVET">

          <font color="#34a6a7">[ w a r z o n e ]</font>

        </a><br>

        <font color="#34a6a7">$ROOMNAME parabellum




lt;/font><br>$USERLIST parabellum




lt;br>

      </td>

    </tr>

  </table>

</div>

 









	Метки: ,