Memperluas div yang dapat diciutkan ke baris tabel

Saya dapat menutup/memperluas div. jsfiddle

JQuery :

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

Contoh 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

Saya ingin memodifikasi contoh ini sehingga dapat menciutkan/memperluas baris tabel tertentu. (deskripsi - Saya memiliki banyak kategori dan subkategori. Saya berencana membuat tabel yang akan menampilkan semua kategori sebagai baris terpisah. Saat kita mengklik kategori, subkategori akan ditampilkan).

div tidak dapat ditempatkan di dalam tabel. Jadi, pendekatan ini tidak berhasil.

Tolong sarankan beberapa alternatif atau petunjuk apa pun di mana saya bisa mendapatkan dokumentasi seputar hal itu.

Tabel (semacam formulir umpan balik):

<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 sumber
comment
Silakan tunjukkan markup tabel yang ingin Anda kerjakan.   -  person alexn    schedule 13.04.2013
comment
Menambahkan struktur tabel. Ini semacam formulir umpan balik sederhana.   -  person Soumya    schedule 13.04.2013

Jawaban (2)


arrow_upward
1
arrow_downward

Saya sarankan menggunakan ul dalam hal ini karena cocok untuk struktur pohon. Misalnya:

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

atau jika ingin menggunakan tabel, Anda harus menyematkan subtabel di dalam sel

<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>

Untuk konsistensi, saya pikir kita harus menggunakan ul, tabel atau blok (div). Sebaiknya tidak mencampurkannya. Jika Anda perlu menggabungkan antara tabel dan div, coba ini:

<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
Saya telah menambahkan struktur tabel. Beberapa tabel dan ul bukanlah pilihan bagi saya. Saya memerlukan satu tabel tempat saya dapat mengubah visibilitas baris. Saya mencoba menghindari penggunaan tabel dan div secara bersamaan, tetapi tidak dapat menemukan jalan keluar. Mohon sarannya. Terima kasih. - person Soumya; 13.04.2013

arrow_upward
3
arrow_downward

seperti yang telah disarankan sebelumnya, markup terbaik untuk struktur tersebut adalah ul/ol yang disarangkan, tetapi jika Anda harus menggunakan tabel, Anda dapat menggunakan elemen <tbody>. Lihat jsfiddle ini

CSS

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

Menandai

 <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);
        });
     });

dengan menggunakan teknik ini, Anda akan dapat membuat group beberapa baris tabel dan show/hide sebagai satu unit.

person Ejaz    schedule 13.04.2013