قم بتنفيذ الرمز القابل للطي لتقرير مع jQuery

Question

أحاول الانهيار أو توسيع صفوف الجدول باستخدام + و - علامة معروضة على العمود الأول ، باستخدام jQuery.

<script type="text/javascript">                                         
$(document).ready(function() {

   $("tr.header").click(function () { 
      $("tr.child", $(this).parent()).slideToggle("fast");

   });


});

أحاول استخدام هذا الرمز. لكني أريد أن يتم تبديل طفل الوالد الذي ينقر بمفرده. أي أفكار حول كيفية القيام بذلك؟

عينة HTML

<table>
    <tr class="header" >
         <td>1  </td>
        <td>line1</td>
    </tr>
    <tr class="child">
        <td>2</td>
        <td>line2</td>
    </tr>
    <tr class="child">
        <td>3</td>
        <td>line3</td>
    </tr>
  <tr class="header" >
         <td>4  </td>
        <td>line4</td>
    </tr>
    <tr class="child">
        <td>5</td>
        <td>line5</td>
    </tr>
    <tr class="child">
        <td>6</td>
        <td>line6</td>
    </tr>

</table>

تحرير: أحاول وضع صورة + أو - في نفس الصف مثل السطر 1 ، الخط 4 وأحاول الحصول على مقبض منه في البرنامج النصي Java للتبديل بين الصورتين. هل يمكن للبعض مساعدتي في ذلك؟

تحرير 1: هل يمكنني انهيار الشجرة بأكملها عند تحميل المستند. أنا مبتدئ باستخدام Xquery.

Answer 1

(في رد على الرمز المتغير)

هناك طريقتان: إما تغيير رمزك لتبديل الصفوف فقط بعد الرأس النقر:

$("tr.header").click(function () { 
  $(this).nextUntil(".header").slideToggle("fast");
});

أو استخدم الكود الأصلي ولف الأقسام في tbodys:

<table>
  <tbody>
    <tr class="header" >
         <td>1  </td>
        <td>line1</td>
    </tr>
    <tr class="child">
        <td>2</td>
        <td>line2</td>
    </tr>
    <tr class="child">
        <td>3</td>
        <td>line3</td>
    </tr>
  </tbody>
  <tbody>
    <tr class="header" >
         <td>4  </td>
        <td>line4</td>
    </tr>
    <tr class="child">
        <td>5</td>
        <td>line5</td>
    </tr>
    <tr class="child">
        <td>6</td>
        <td>line6</td>
    </tr>
  </tbody>
</table>

Answer 2

ألقِ نظرة على هذا لدمج تبديل الصورة:

باستخدام jQuery للعثور على صف الجدول التالي

لقد قمت بدمجها في الكود المشترك ، ويبدو أن هذا يعمل على تبديل الصورة وكذلك الصفوف الموجودة تحتها.

$ (وثيقة). READER (function () {

// سيؤدي ذلك إلى تشغيل صفوف على تحميل الصفحة الأولية $ ("tr.header"). nextuntil (". header"). slidetoggle ("fast" ، function () {}) ؛ // نهاية الانزلاق

// سيؤدي هذا إلى توسيع صف الانهيار والتبديل + و - الصور $ ("tr.header"). انقر فوق (function () {

   $(this).nextUntil(".header").slideToggle("fast", function () { 
   }); //end slideToggle

   if ( ( $(this).hasClass('hidden') ) ) {
     $('img', this).attr("src", "plus.gif");
     $('img', this).attr("alt", "Click to expand row");
  } else {
     $('img', this).attr("src", "minus.gif");
     $('img', this).attr("alt", "Click to collapse row");
  }

   $(this).toggleClass('hidden');
   $(this).parent().next().toggle();

}) ؛ // نهاية انقر

}) ؛ // end document.ready

فيما يلي HTML المرتبطة ولكن عليك إزالة تعليقات HTML حول علامة IMG لأن ذلك فقط لمنع StackOverflow من التفكير في نشر صورة فعلية.

1 Line1 2 Line2 3 Line3 4 Line4 5 Line5 6 Line6

Answer 3

رمزك الحالي يوسع/ينهار طفل الصف الأصل. في مثالك ، ينهار كلاً من صفوف الأطفال (Data1 ، Data2 و Data3 ، Data4)

هل تحاول تحقيق شيء مختلف هنا؟

أومانغ