Расширение складных элементов div до строк таблицы

Я могу свернуть/развернуть div. jsfiddle

JQuery:

$(document).ready(function () {
    $(".data").hide();
    $(".header").click(function () {
        $(this).next(".data").slideToggle(200);
    });
});

Пример html:

<div class="outermost">
<p class="header">Category - 1</p>
<div class="data">
    Sub Cateogry 1.1<br/>
    Sub Cateogry 1.2
</div>
<p class="header">Category - 2</p>
<div class="data">
    Sub Cateogry 2.1<br/>
    Sub Cateogry 2.2

Я хочу изменить этот пример, чтобы он мог сворачивать/разворачивать строки данной таблицы. (описание - у меня много категорий и подкатегорий. Я планирую создать таблицу, в которой все категории будут отображаться в виде отдельных строк. Когда мы нажимаем на категории, должны отображаться подкатегории).

div нельзя поместить внутрь таблицы. Таким образом, этот подход не работает.

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

Таблица (своего рода форма обратной связи):

<table><tbody>
<tr><th>Item</th><th>Feedback</th></tr>
<tr><td colspan=2>Category1</td></tr>
<tr><td>Sub Category 1.1</td><td><input type="text" ></td></tr>
<tr><td>Sub Category 1.2</td><td><input type="text" ></td></tr>
<tr><td colspan=2>Category2</td></tr>
<tr><td>Sub Category 2.1</td><td><input type="text" ></td></tr>
</tbody></table>

javascript jquery html-table
person Soumya    schedule 13.04.2013    source источник
comment
Пожалуйста, покажите разметку таблицы, с которой вы хотите работать.   -  person alexn    schedule 13.04.2013
comment
Добавлена ​​структура таблицы. Это своего рода простая форма обратной связи.   -  person Soumya    schedule 13.04.2013

Ответы (2)


arrow_upward
1
arrow_downward

Я предлагаю использовать ul в этом случае, так как он подходит для древовидной структуры. Например:

<ul class="outermost">
    <li>Category - 1</li>
    <li>
      <ul>
          <li>Sub Cateogry 1.1</li>
          <li>Sub Cateogry 1.2</li>
      </ul>
    </li>
</ul>

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

<table class="outermost">
    <tr><td>Category - 1</td></tr>
    <tr>
        <td>
            <table>
                <tr><td>Sub Cateogry 1.1</td></tr>
                <tr><td>Sub Cateogry 1.2</td></tr>
            </table>
        </td>
    </tr>
    </table>

Для согласованности, я думаю, мы должны использовать ul, table или block (div). Не следует смешивать их вместе. Если вам нужно смешать таблицу и div, попробуйте следующее:

<table class="outermost">
    <tr><td>Category - 1</td></tr>
    <tr>
        <td>
            <div>
                <div>Sub Cateogry 1.1</div>
                <div>Sub Cateogry 1.2</div>
            </div>
        </td>
    </tr>
    </table>
person Khanh TO    schedule 13.04.2013
comment
Я добавил структуру таблицы. Несколько таблиц и ul для меня не вариант. Мне нужна одна таблица, в которой я могу переключать видимость строк. Я пытаюсь избежать совместного использования таблицы и div, но не могу найти выход. Пожалуйста, предложите. Спасибо. - person Soumya; 13.04.2013

arrow_upward
3
arrow_downward

как было предложено ранее, наилучшей разметкой для такой структуры является вложенная ul/ol, но если вам нужно использовать таблицу, вы можете использовать <tbody> элементов. См. этот jsfiddle

CSS

 .outermost td{padding: 10px;}
 .outermost .header{background:#eee}
 .data{display: none;}
 .data td{padding-left :20px;}

Разметка

 <div class="outermost">
     <table>
        <tbody class="header">
           <tr>
              <td>Category - 1</td>
           </tr>
        </tbody>
        <tbody class="data">
           <tr>
              <td>Sub Cateogry 1.1</td>
           </tr>
           <tr>
              <td>Sub Cateogry 1.2</td>
           </tr>
        </tbody>
        <tbody class="header">
           <tr>
              <td>Category - 2</td>
           </tr>
        </tbody>
        <tbody class="data">
           <tr>
              <td>Sub Cateogry 2.1</td>
           </tr>
           <tr>
              <td>Sub Cateogry 2.2</td>
           </tr>
        </tbody>
     </table>
  </div>

JavaScript

     $(document).ready(function () {
        $(".header").click(function () {
           $(this).next("tbody.data").slideToggle(200);
        });
     });

используя эту технику, вы сможете group несколько строк таблицы и show/hide их как одно целое.

person Ejaz    schedule 13.04.2013