การขยาย div ที่ยุบได้เป็นแถวของตาราง

ฉันสามารถยุบ/ขยาย div ได้ jsfiddle

เจคิวรี :

$(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 นี้

ซีเอสเอส

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

จาวาสคริปต์

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

โดยใช้เทคนิคนี้ คุณจะสามารถ group แถวของตารางหลายแถวและ show/hide แถวเหล่านั้นเป็นหน่วยเดียวได้

person Ejaz    schedule 13.04.2013