क्लिक पर JQuery टॉगल पंक्तियां

मैं किसी विशिष्ट आईडी के साथ पंक्ति पर क्लिक करते समय पंक्तियों का सबसेट छुपाने/दिखाने का प्रयास कर रहा हूं।क्लिक पर JQuery टॉगल पंक्तियां

वेब पर बहुत सारी खोजों और बहुत से प्रयासों के माध्यम से मुझे नीचे कोड मिला।

केवल कुछ ही कारणों से यह कोड पंक्तियों के पहले सेट को छिपाता/दिखाता है।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 

<head> 
      <title>Test</title> 

      <script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script> 

      <script type="text/javascript"> 

      $(document).ready(function() 
      { 
       $('#rowToClick').click(function() 
       { 
        $(this).nextAll('tr').each(function() 
        { 
         if ($(this).is('#rowToClick')) 
         { 
          return false; 
         } 
         $(this).toggle(); 
        }); 
       }); 
      }); 
      </script> 
     </head>   

<body> 
<table> 
    <tr id="rowToClick"><td>ClickMe</td></tr> 
    <tr id="Tr1"><td>Toggled</td></tr> 
    <tr id="Tr2"><td>Toggled</td></tr> 
    <tr id="Tr3"><td>Toggled</td></tr> 
    <tr id="Tr4"><td>Toggled</td></tr> 
    <tr id="Tr5"><td>Toggled</td></tr> 
    <tr id="rowToClick"><td>ClickMe</td></tr> 
    <tr id="Tr6"><td>Toggled</td></tr> 
    <tr id="Tr7"><td>Toggled</td></tr> 
    <tr id="Tr8"><td>Toggled</td></tr> 
    <tr id="Tr9"><td>Toggled</td></tr> 
    <tr id="Tr10"><td>Toggled</td></tr> 
</table> 
</body> 

</html>

किसी के पास कोड का कोई सुझाव और/या संभव पुनर्लेखन है?

---------- अद्यतन - अंतिम समाधान -----------

मैं समाधान नीचे ब्रैंडन के इनपुट के आधार पर के साथ समाप्त हो गया, जैसा कि मैंने चाहता था एक ही व्यवहार के साथ अधिक घोंसले करने के लिए, एक संक्षिप्त पेड़ दृश्य की तरह। दुर्भाग्यवश इसका मतलब था कि मुझे राज्य का ट्रैक रखने के लिए एक अतिरिक्त विशेषता जोड़नी पड़ी, लेकिन मैं इसके साथ तब तक रह सकता हूं जब तक कि मुझे कोई दूसरा रास्ता न मिले (उदा। अगली पंक्ति की दृश्यता जांचें)।

  $(document).ready(function() { 
      toggleRows('.module','.namespace'); 
      toggleRows('.namespace','.type'); 
      toggleRows('.type','.member'); 
     }); 

     function toggleRows(parentClass,subClass) 
     { 
      $(parentClass).click(function() { 

       if($(this).attr("value")=="collapsed")     
       { 
        $(this).attr("value","expanded"); 
        $(this).nextUntil(parentClass).filter(subClass).toggle(true); 
       } 
       else 
       { 
        $(this).attr("value","collapsed"); 
        $(this).nextUntil(parentClass).attr("value","collapsed"); 
        $(this).nextUntil(parentClass).toggle(false); 
       }  

      }); 
     }

स्रोत

2011-03-29 Christian Mikkelsen

क्या आपने टेबललेटर जैसे प्लगइन का उपयोग करने के बारे में सोचा है? http://blog.pengoworks.com/index।cfm/2008/3/28/समाप्त-jQuery-Tablesorter-mod-for-Collapsible-table-row – iivel

.attr() के बजाय .data() का उपयोग करें। इसका अधिक अनुपालन: '$ (यह)। डेटा (" मान ")' और '$ (यह)। डेटा (" मान "," विस्तारित ")'। साथ ही, DOM 2x: '$ (this) .nextUntil (parentClass) .data (" value "," collapsed ") स्कैनिंग से बचने के लिए अपनी कॉल को चेन करें। टॉगल (झूठा);' – Brandon

सबसे पहले, आप एक ही आईडी वाले कई पंक्तियां नहीं कर सकते हैं। इसके बजाय "rowToClick" करने के लिए आईडी की स्थापना की, सीएसएस वर्ग सेट:

<tr class='rowToClick'><td>click me</td></tr>

इसके बाद, यह काम करना चाहिए:

$(document).ready(function() 
     { 
      $(".rowToClick").click(function() { $(this).nextUntil(".rowToClick").toggle(); }); 
     });

स्रोत

2011-03-29 16:42:40 Brandon

ऐसा इसलिए है क्योंकि आईडी विशेषता केवल एक दस्तावेज़ में प्रत्येक आईडी के लिए उपयोग की जा सकती है। आपको इसके बजाय क्लास एट्रिब्यूट का उपयोग करना चाहिए, और उसके बाद अपने jquery कोड में, वर्ग पंक्ति के साथ आइटम्स तक पहुंचें $ ("। rowToClick") चयनकर्ता के साथ क्लिक करें।

उम्मीद है कि इससे मदद मिलती है।

एंडी

स्रोत

2011-03-29 16:41:11 Andbdrew

एक नज़र at this fiddle
लो :not() चयनकर्ता का उपयोग करना, आप सभी tr तत्वों का चयन कर सकते हैं जिनके पास आईडी/कक्षा नहीं है जिसे आप फ़िल्टर करना चाहते हैं:
```
$('.rowToClick').click(function() 
{ 
    $('tr:not(.rowToClick)').toggle(); 
    //toggle all rows on the page that 
    //do not have the class rowToClick 
}); 
```
ध्यान दें कि आपके पास एक ही आईडी के साथ दो तत्व नहीं हो सकते हैं - आपके पास आईडी rowToClick आईडी के साथ दो पंक्तियां हैं। इसके बजाय class का उपयोग करें।

स्रोत

2011-03-29 16:43:23

मैं कुछ इस तरह करने के लिए अपने कोड स्विच चाहते हैं:

<tr class="rowToClick" rel="1"><td>ClickMe</td></tr> 
<tr class="row1Collapse"><td>Toggled</td></tr> 
<tr class="row1Collapse"><td>Toggled</td></tr> 
<tr class="row1Collapse"><td>Toggled</td></tr> 
<tr class="row1Collapse"><td>Toggled</td></tr> 
<tr class="row1Collapse"><td>Toggled</td></tr> 
<tr class="rowToClick" rel="2"><td>ClickMe</td></tr> 
<tr class="row2Collapse"><td>Toggled</td></tr> 
<tr class="row2Collapse"><td>Toggled</td></tr> 
<tr class="row2Collapse"><td>Toggled</td></tr> 
<tr class="row2Collapse"><td>Toggled</td></tr> 
<tr class="row2Collapse"><td>Toggled</td></tr>

फिर

, कुछ इस तरह:

$('.rowToClick').click(function() 
{ 
    var rel = $(this).attr('rel'); 

    $('.row' + rel + 'Collapse').show(); // or hide, you get the idea 
});

स्रोत

2011-03-29 16:43:23 Tejs

मेरा मानना है कि यह वांछित व्यवहार है:

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title></title> 

    <script src="Includes/JavaScript/jQuery/version1.4.4/Core/jquery-1.4.4.js" type="text/javascript"></script> 

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

      // Also, just as an extra, use "context" to limit the scope of any jQuery selector-search. 
      // That way on large pages your selector doesn't search through the whole page, 
      // it only searches the tables HTML. 
      // Doing so is a short-cut for: $('#tblMyTable').find('tr.clickTrigger'); 
      var context = $('#tblMyTable'); 

      $('tr.clickTrigger', context).click(function() { 

       $(this).nextAll('tr').each(function() { 

        if ($(this).is('tr.clickTrigger')) 
         return false; 

        $(this).toggle(); 
       }); 
      }); 
     }); 
    </script> 


</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <table id="tblMyTable" cellpadding="0" cellspacing="0"> 
      <tr class="clickTrigger"> 
       <td>ClickMe</td> 
      </tr> 
      <tr id="Tr1"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr2"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr3"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr4"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr5"> 
       <td>Toggled</td> 
      </tr> 
      <tr class="clickTrigger"> 
       <td>ClickMe</td> 
      </tr> 
      <tr id="Tr6"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr7"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr8"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr9"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr10"> 
       <td>Toggled</td> 
      </tr> 
     </table> 
    </div> 
    </form> 
</body> 
</html>

स्रोत

2011-03-29 17:04:24

<script> 
    function padre(id){ 
         var pa=$('.rowToClick_'+id); 
         $(pa).nextAll('tr').each(function(){ 
          if ($(this).is('.rowToClickEnd_'+id)) 
          { 
           $(this).toggle(); 
           return false; 
          } 
          $(this).toggle(); 
         }); 
        } 
       </script> 

    <table> 
     <tr class="rowToClick_1"><td><a href="javascript:padre('1')">+</a>Categoria 1</td></tr> 
     <tr id="Tr1" class="rowToClick_1_1"><td><a href="javascript:padre('1_1')">+</a>Categoria 1_1</td></tr> 
     <tr id="Tr1_1"><td>Categoria 1_1_1</td></tr> 
     <tr id="Tr1_2" class="rowToClickEnd_1_1"><td>Categoria 1_1_2</td></tr> 
     <tr id="Tr2"><td>Categoria 1_2</td></tr> 
     <tr id="Tr3"><td>Categoria 1_3</td></tr> 
     <tr id="Tr4"><td>Categoria 1_4</td></tr> 
     <tr id="Tr5" class="rowToClickEnd_1"><td>Toggled</td></tr> 
     <tr class="rowToClick"><td>ClickMe</td></tr> 
     <tr id="Tr6"><td>Toggled</td></tr> 
     <tr id="Tr7"><td>Toggled</td></tr> 
     <tr id="Tr8"><td>Toggled</td></tr> 
     <tr id="Tr9"><td>Toggled</td></tr> 
     <tr id="Tr10" class="rowToClickEnd"><td>Toggled</td></tr> 
    </table>

स्रोत

2012-06-28 20:09:06

यह विभिन्न स्तरों के लिए लागू होता है –

कुछ जानकारी जोड़ें आपके उत्तर कैसे काम करता है इसके बारे में। यह दूसरों की मदद करेगा। –

क्लिक पर JQuery टॉगल पंक्तियां

उत्तर

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