स्लाइड करने के लिए jQuery का उपयोग करना तालिका पंक्तियों के समूह को टॉगल करें

मैं जावास्क्रिप्ट और jQuery के लिए काफी नया हूं, इसलिए उम्मीद है कि यह एक त्वरित सुधार होगा। मुझे डेटा युक्त एक टेबल प्रदर्शित करने की आवश्यकता है जिसे कई श्रेणियों में समूहीकृत किया जा सकता है, और मैं एक स्लाइड टॉगल को कार्यान्वित करना चाहता हूं जो प्रत्येक दिए गए श्रेणी में सभी अवलोकनों को छिपाता/प्रकट करता है।स्लाइड करने के लिए jQuery का उपयोग करना तालिका पंक्तियों के समूह को टॉगल करें

नीचे दिया गया कोड (आदर्श) 4 कॉलम और 9 पंक्तियों के साथ एक तालिका प्रदर्शित करना चाहिए, जिसमें 3 पंक्तियों के प्रत्येक समूह को हरे "सेक्शन i" पंक्ति से पहले किया जाना चाहिए। मैं प्रत्येक सेक्शन हेडर को एक स्लाइड टॉगल के रूप में काम करना चाहता हूं जो इसके नीचे की सभी पंक्तियों को फैलाता या ढहता है। अभी, कुछ भी गिर रहा है। कोई विचार?

<head> 
    <style type="text/css"> 
    td{padding:5px;} 
    </style> 

    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
     $(".flip").click(function(){ 
      $(this).next(".section").slideToggle(); 
     }); 
    }); 
    </script> 

</head> 

<body> 
    <p> 
     <table id="main_table"> 
     <thead> 
      <tr class="firstline"> 
       <th>Column1</th> 
       <th>Column2</th> 
       <th>Column3</th> 
       <th>Column4</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr style="background-color:green; color:white"> 
       <td colspan="4" class="flip"> Section 1 </td> 
      </tr> 
      <div class="section"> 
      <tr> 
       <td>item 111</td> 
       <td>item 112</td> 
       <td>item 113</td> 
       <td>item 114</td> 
      </tr> 
      <tr> 
       <td>item 121</td> 
       <td>item 122</td> 
       <td>item 123</td> 
       <td>item 124</td> 
      </tr> 
      <tr> 
       <td>item 131</td> 
       <td>item 132</td> 
       <td>item 133</td> 
       <td>item 134</td> 
      </tr> 
      </div> 
      <tr style="background-color:green; color:white"> 
       <td colspan="4" class="flip"> Section 2 </td> 
      </tr> 
      <div class="section"> 
      <tr> 
       <td>item 211</td> 
       <td>item 212</td> 
       <td>item 213</td> 
       <td>item 214</td> 
      </tr> 
      <tr> 
       <td>item 221</td> 
       <td>item 222</td> 
       <td>item 223</td> 
       <td>item 224</td> 
      </tr> 
      <tr> 
       <td>item 231</td> 
       <td>item 232</td> 
       <td>item 233</td> 
       <td>item 234</td> 
      </tr> 
      </div> 
      <tr style="background-color:green; color:white"> 
       <td colspan="4" class="flip"> Section 3 </td> 
      </tr> 
      <div class="section"> 
      <tr> 
       <td>item 311</td> 
       <td>item 312</td> 
       <td>item 313</td> 
       <td>item 314</td> 
      </tr> 
      <tr> 
       <td>item 321</td> 
       <td>item 322</td> 
       <td>item 323</td> 
       <td>item 324</td> 
      </tr> 
      <tr> 
       <td>item 331</td> 
       <td>item 332</td> 
       <td>item 333</td> 
       <td>item 334</td> 
      </tr> 
      </div> 
     </tbody> 
     </table> 
    </p> 
</body>

स्रोत

2011-02-24 CCC

http://jsfiddle.net/xpZTv/ – AndreKR

पहले: आप 'table' और' td' के बीच div' उपयोग नहीं कर सकते '। दूसरा: 'td.flip' के लिए कोई तत्व * अगला() * नहीं है (इसमें कोई भाई बहन नहीं है)। – AndreKR

मेरे पास jQuery और तालिकाओं के साथ कुछ करने की कोशिश करने में वास्तविक समस्याएं थीं, ऐसा लगता है कि टेबल वास्तव में गेंद को अच्छी तरह से नहीं खेलते हैं इसलिए मैंने टेबल को हटा दिया और इसके बजाय divs का उपयोग बहुत बेहतर काम करता है :-) – Rob

आप एक <table> उस तरह में <div> रों मिश्रण नहीं कर सकते, बजाय अतिरिक्त <tbody> तत्वों का उपयोग करें। आपके कॉलबैक में, this<td> तत्व है जिसमें कोई भाई बहन नहीं है इसलिए .next कुछ भी उपयोगी नहीं है; आप तब तक वापस जाना चाहते हैं जब तक आप .section जैसी गहराई पर कुछ ऐसी चीज़ न प्राप्त करें जिसमें आप रुचि रखते हैं और फिर वहां से .next पर कॉल करें।

आपका HTML अधिक इस तरह दिखना चाहिए:

<table id="main_table"> 
    <thead> 
     <tr class="firstline"> 
      <th>Column1</th> 
      <th>Column2</th> 
      <th>Column3</th> 
      <th>Column4</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr style="background-color:green; color:white"> 
      <td colspan="4" class="flip"> Section 1 </td> 
     </tr> 
    </tbody> 
    <tbody class="section"> 
     <tr> 
      <td>item 111</td> 
      <td>item 112</td> 
      <td>item 113</td> 
      <td>item 114</td> 
     </tr> 
     <!-- ... -->

और इस तरह से अपने क्लिक हैंडलर:

$('.flip').click(function() { 
    $(this) 
     .closest('tbody') 
     .next('.section') 
     .toggle('fast'); 
});

.closest कॉल जब तक यह एक <tbody> पाता है और फिर आप फोन आपके पूर्वजों ऊपर वापस चला जाता है उस पर .next।

अपडेट किया गया jsfiddle: http://jsfiddle.net/ambiguous/Udxyb/4/

स्रोत

2011-02-25 03:39:27

अरे, यह पूरी तरह से काम करता है। धन्यवाद! – CCC

ध्यान दें कि मूल प्रश्न स्लाइड टॉगल के लिए पूछता है, जो स्पष्ट रूप से इस विधि के साथ काम नहीं करता है। 'टॉगल' को 'स्लाइड टॉगल' में बदलना एनीमेशन को तोड़ देता है। http://jsfiddle.net/m83Pc/ – supertrue

@supertrue: यह बहुत समय पहले था इसलिए मुझे यकीन नहीं है कि 'स्लाइड टॉगल' से 'टॉगल' स्विच कहां से आया था। मुझे संदेह है कि एनीमेशन समस्या '

' के अंदर सामान्य प्रदर्शन और घोंसले के मुद्दों का दुष्प्रभाव है। मैं थोड़ा सा पोक करूंगा और देख सकता हूं कि मैं किसके साथ आ सकता हूं। –

संबंधित मुद्दे

स्लाइड करने के लिए jQuery का उपयोग करना तालिका पंक्तियों के समूह को टॉगल करें

उत्तर

संबंधित मुद्दे