1. casa
  2. Domanda e risposta
  3. Jquery .slideToggle ("slow"); Non funzionare correttamente per la tavola expander

Jquery .slideToggle ("slow"); Non funzionare correttamente per la tavola expander

2013-05-13 10 views
5

cerco di aggiungere funzionalità .slideToggle("slow"); al mio tavolo come da definire qui. W3SchoolsJquery .slideToggle ("slow"); Non funzionare correttamente per la tavola expander

lavoro effetto Toggle ma correttamente. Ho bisogno effetto simile di cui al precedente collegamento W3School. Puoi vedere il mio codice allo JSfiddle

Esiste un metodo di ordinamento (espansione tabella) senza l'uso di alcun plug-in?

Ecco il mio codice Per la tabella HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablestyle" style="overflow-x: scroll; "> 
      <tr> 
       <td class="tableviewtop"><input name="" type="checkbox" value=""></td> 
       <td class="tableviewtop textaligncenter">Material Name</td> 
       <td class="tableviewtop textaligncenter"></td> 
       <td class="tableviewtop textaligncenter">Color</td> 
       <td class="tableviewtop textaligncenter">Base Price</td> 
       <td class="tableviewtop textaligncenter">MSRP</td> 
       <td class="tableviewtop textaligncenter">MAP</td> 
       <td class="tableviewtop textaligncenter">Net Price</td> 
       <td class="tableviewtop textaligncenter">Units Ord.</td> 
       <td class="tableviewtop textaligncenter">Total Base Price</td> 
       <td class="tableviewtop textaligncenter">Total Net Price</td> 
       <td class="tableviewtop textaligncenter">Dis %</td> 
      </tr> 
      <tr> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter">Demo Name</td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "http://www.iconfinder.com/icons/14227/download/png/16" style = "padding-left:3px;" id = "tda"/></td> 
       <td class="textaligncenter">$55.00</td> 
       <td class="textaligncenter">$110.00</td> 
       <td class="textaligncenter">$110.00</td> 
       <td class="textaligncenter">$110.00</td> 
       <td class="textaligncenter">140</td> 
       <td class="textaligncenter">$4815.00</td> 
       <td class="textaligncenter">$3284.00</td> 
       <td class="textaligncenter">10%</td> 
      </tr> 

      <!-- Expander Data Start --> 

      <tr style = "display:none;" id = "tra1"> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter"></td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td> 
       <td class="textaligncenter">$25.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">255</td> 
       <td class="textaligncenter">$3284.00</td> 
       <td class="textaligncenter">$7581.00</td> 
       <td class="textaligncenter">15%</td> 
      </tr> 
      <tr style = "display:none;" id = "tra2"> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter"></td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td> 
       <td class="textaligncenter">$25.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">511</td> 
       <td class="textaligncenter">$2948.00</td> 
       <td class="textaligncenter">$4815.00</td> 
       <td class="textaligncenter">10%</td> 
      </tr> 

      <!-- Expander Data End --> 

      <tr> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter">Demo Name</td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "http://www.iconfinder.com/icons/14227/download/png/16" style = "padding-left:3px;" id = "tdb"/></td> 
       <td class="textaligncenter">$35.00</td> 
       <td class="textaligncenter">$70.00</td> 
       <td class="textaligncenter">$70.00</td> 
       <td class="textaligncenter">$70.00</td> 
       <td class="textaligncenter">120</td> 
       <td class="textaligncenter">$3548.00</td> 
       <td class="textaligncenter">$2948.00</td> 
       <td class="textaligncenter">5%</td> 
      </tr> 

      <!-- Expander Data Start --> 

      <tr style = "display:none;" id = "trb1"> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter"></td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td> 
       <td class="textaligncenter">$25.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">255</td> 
       <td class="textaligncenter">$3284.00</td> 
       <td class="textaligncenter">$7581.00</td> 
       <td class="textaligncenter">15%</td> 
      </tr> 
      <tr style = "display:none;" id = "trb2"> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter"></td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td> 
       <td class="textaligncenter">$25.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">511</td> 
       <td class="textaligncenter">$2948.00</td> 
       <td class="textaligncenter">$4815.00</td> 
       <td class="textaligncenter">10%</td> 
      </tr> 

      <!-- Expander Data End --> 

      <tr> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter">Demo Name</td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "http://www.iconfinder.com/icons/14227/download/png/16" style = "padding-left:3px;" id = "tdc"/></td> 
       <td class="textaligncenter">$60.00</td> 
       <td class="textaligncenter">$120.00</td> 
       <td class="textaligncenter">$120.00</td> 
       <td class="textaligncenter">$120.00</td> 
       <td class="textaligncenter">210</td> 
       <td class="textaligncenter">$2582.00</td> 
       <td class="textaligncenter">$1899.00</td> 
       <td class="textaligncenter">30%</td> 
      </tr> 

      <!-- Expander Data Start --> 

      <tr style = "display:none;" id = "trc1"> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter"></td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td> 
       <td class="textaligncenter">$25.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">255</td> 
       <td class="textaligncenter">$3284.00</td> 
       <td class="textaligncenter">$7581.00</td> 
       <td class="textaligncenter">15%</td> 
      </tr> 
      <tr style = "display:none;" id = "trc2"> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter"></td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td> 
       <td class="textaligncenter">$25.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">511</td> 
       <td class="textaligncenter">$2948.00</td> 
       <td class="textaligncenter">$4815.00</td> 
       <td class="textaligncenter">10%</td> 
      </tr> 

      <!-- Expander Data End --> 

      <tr> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter">Demo Name</td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "http://www.iconfinder.com/icons/14227/download/png/16" style = "padding-left:3px;" id = "tdd"/></td> 
       <td class="textaligncenter">$20.00</td> 
       <td class="textaligncenter">$40.00</td> 
       <td class="textaligncenter">$40.00</td> 
       <td class="textaligncenter">$40.00</td> 
       <td class="textaligncenter">155</td> 
       <td class="textaligncenter">$6521.00</td> 
       <td class="textaligncenter">$6845.00</td> 
       <td class="textaligncenter">12%</td> 
      </tr> 

      <!-- Expander Data Start --> 

      <tr style = "display:none;" id = "trd1"> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter"></td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td> 
       <td class="textaligncenter">$25.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">255</td> 
       <td class="textaligncenter">$3284.00</td> 
       <td class="textaligncenter">$7581.00</td> 
       <td class="textaligncenter">15%</td> 
      </tr> 
      <tr style = "display:none;" id = "trd2"> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter"></td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td> 
       <td class="textaligncenter">$25.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">511</td> 
       <td class="textaligncenter">$2948.00</td> 
       <td class="textaligncenter">$4815.00</td> 
       <td class="textaligncenter">10%</td> 
      </tr> 

      <!-- Expander Data End --> 

      <tr> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter">Demo Name</td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "http://www.iconfinder.com/icons/14227/download/png/16" style = "padding-left:3px;" id = "tde"/></td> 
       <td class="textaligncenter">$25.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">196</td> 
       <td class="textaligncenter">$2579.00</td> 
       <td class="textaligncenter">$956.00</td> 
       <td class="textaligncenter">6%</td> 
      </tr> 

      <!-- Expander Data Start --> 

      <tr style = "display:none;" id = "tre1"> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter"></td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td> 
       <td class="textaligncenter">$25.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">255</td> 
       <td class="textaligncenter">$3284.00</td> 
       <td class="textaligncenter">$7581.00</td> 
       <td class="textaligncenter">15%</td> 
      </tr> 
      <tr style = "display:none;" id = "tre2"> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter"></td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td> 
       <td class="textaligncenter">$25.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">511</td> 
       <td class="textaligncenter">$2948.00</td> 
       <td class="textaligncenter">$4815.00</td> 
       <td class="textaligncenter">10%</td> 
      </tr> 

      <!-- Expander Data End --> 

      <tr> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter">Demo Name</td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "http://www.iconfinder.com/icons/14227/download/png/16" style = "padding-left:3px;" id = "tdf"/></td> 
       <td class="textaligncenter">$80.00</td> 
       <td class="textaligncenter">$160.00</td> 
       <td class="textaligncenter">$160.00</td> 
       <td class="textaligncenter">$160.00</td> 
       <td class="textaligncenter">128</td> 
       <td class="textaligncenter">$1899.00</td> 
       <td class="textaligncenter">$3548.00</td> 
       <td class="textaligncenter">5%</td> 
      </tr> 

      <!-- Expander Data Start --> 

      <tr style = "display:none;" id = "trf1"> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter"></td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td> 
       <td class="textaligncenter">$25.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">255</td> 
       <td class="textaligncenter">$3284.00</td> 
       <td class="textaligncenter">$7581.00</td> 
       <td class="textaligncenter">15%</td> 
      </tr> 
      <tr style = "display:none;" id = "trf2"> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter"></td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td> 
       <td class="textaligncenter">$25.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">511</td> 
       <td class="textaligncenter">$2948.00</td> 
       <td class="textaligncenter">$4815.00</td> 
       <td class="textaligncenter">10%</td> 
      </tr> 

      <!-- Expander Data End --> 

      <tr> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter">Demo Name</td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "http://www.iconfinder.com/icons/14227/download/png/16" style = "padding-left:3px;" id = "tdg"/></td> 
       <td class="textaligncenter">$30.00</td> 
       <td class="textaligncenter">$60.00</td> 
       <td class="textaligncenter">$60.00</td> 
       <td class="textaligncenter">$60.00</td> 
       <td class="textaligncenter">451</td> 
       <td class="textaligncenter">$6845.00</td> 
       <td class="textaligncenter">$2582.00</td> 
       <td class="textaligncenter">30%</td> 
      </tr> 

      <!-- Expander Data Start --> 

      <tr style = "display:none;" id = "trg1"> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter"></td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td> 
       <td class="textaligncenter">$25.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">255</td> 
       <td class="textaligncenter">$3284.00</td> 
       <td class="textaligncenter">$7581.00</td> 
       <td class="textaligncenter">15%</td> 
      </tr> 
      <tr style = "display:none;" id = "trg2"> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter"></td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td> 
       <td class="textaligncenter">$25.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">511</td> 
       <td class="textaligncenter">$2948.00</td> 
       <td class="textaligncenter">$4815.00</td> 
       <td class="textaligncenter">10%</td> 
      </tr> 

      <!-- Expander Data End --> 

      <tr> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter">Demo Name</td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "http://www.iconfinder.com/icons/14227/download/png/16" style = "padding-left:3px;" id = "tdh"/></td> 
       <td class="textaligncenter">$35.00</td> 
       <td class="textaligncenter">$70.00</td> 
       <td class="textaligncenter">$70.00</td> 
       <td class="textaligncenter">$70.00</td> 
       <td class="textaligncenter">618</td> 
       <td class="textaligncenter">$956.00</td> 
       <td class="textaligncenter">$6521.00</td> 
       <td class="textaligncenter">8%</td> 
      </tr> 

      <!-- Expander Data Start --> 

      <tr style = "display:none;" id = "trh1"> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter"></td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td> 
       <td class="textaligncenter">$25.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">255</td> 
       <td class="textaligncenter">$3284.00</td> 
       <td class="textaligncenter">$7581.00</td> 
       <td class="textaligncenter">15%</td> 
      </tr> 
      <tr style = "display:none;" id = "trh2"> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter"></td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td> 
       <td class="textaligncenter">$25.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">511</td> 
       <td class="textaligncenter">$2948.00</td> 
       <td class="textaligncenter">$4815.00</td> 
       <td class="textaligncenter">10%</td> 
      </tr> 

      <!-- Expander Data End --> 

      <tr> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter">Demo Name</td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "http://www.iconfinder.com/icons/14227/download/png/16" style = "padding-left:3px;" id = "tdi"/></td> 
       <td class="textaligncenter">$44.00</td> 
       <td class="textaligncenter">$88.00</td> 
       <td class="textaligncenter">$88.00</td> 
       <td class="textaligncenter">$88.00</td> 
       <td class="textaligncenter">426</td> 
       <td class="textaligncenter">$7581.00</td> 
       <td class="textaligncenter">$2579.00</td> 
       <td class="textaligncenter">15%</td> 
      </tr> 

      <!-- Expander Data Start --> 

      <tr style = "display:none;" id = "tri1"> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter"></td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td> 
       <td class="textaligncenter">$25.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">255</td> 
       <td class="textaligncenter">$3284.00</td> 
       <td class="textaligncenter">$7581.00</td> 
       <td class="textaligncenter">15%</td> 
      </tr> 
      <tr style = "display:none;" id = "tri2"> 
       <td><input name="" type="checkbox" value=""></td> 
       <td class="textaligncenter"></td> 
       <td class="textaligncenter"><a href="#"></a></td> 
       <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td> 
       <td class="textaligncenter">$25.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">$50.00</td> 
       <td class="textaligncenter">511</td> 
       <td class="textaligncenter">$2948.00</td> 
       <td class="textaligncenter">$4815.00</td> 
       <td class="textaligncenter">10%</td> 
      </tr> 

      <!-- Expander Data End --> 

      </table>

Jquery Codice

// Table jquery code start 

$("#tda").click(function() { 
    $("#tra1").slideToggle("slow"); 
    $("#tra2").slideToggle("slow"); 
}); 
$("#tdb").click(function() { 
    $("#trb1").toggle("slow"); 
    $("#trb2").toggle("slow"); 
}); 
$("#tdc").click(function() { 
    $("#trc1").toggle("slow"); 
    $("#trc2").toggle("slow"); 
}); 
$("#tdd").click(function() { 
    $("#trd1").toggle("slow"); 
    $("#trd2").toggle("slow"); 
}); 
$("#tde").click(function() { 
    $("#tre1").toggle("slow"); 
    $("#tre2").toggle("slow"); 
}); 
$("#tdf").click(function() { 
    $("#trf1").toggle("slow"); 
    $("#trf2").toggle("slow"); 
}); 
$("#tdg").click(function() { 
    $("#trg1").toggle("slow"); 
    $("#trg2").toggle("slow"); 
}); 
$("#tdh").click(function() { 
    $("#trh1").toggle("slow"); 
    $("#trh2").toggle("slow"); 
}); 
$("#tdi").click(function() { 
    $("#tri1").toggle("slow"); 
    $("#tri2").toggle("slow"); 
}); 

// Table jquery code end

fonte

2013-05-13 Shivam Pandya

+1

Come nota a margine: è possibile combinare i selettori jQuery in questo modo: '$ (" # trh1, # trh2 ").toggle ("slow"); ' –

risposta

1

Baber ha fornito un link per il codice di jsfiddle mrtsherman. Modificalo in qualcosa del tipo:

$('tr').not(':first').children('td').wrapInner('<div>'); 

$('button').click(function() { 
    $('tr').not(':first').slideToggle(); 
    $('td > div').slideToggle(); 
});

per attivarlo.

fonte

2013-05-13 13:31:15 typhon

0

Aggiornato il codice jsfiddle vedere questo link>http://jsfiddle.net/d5hWe/31/

$('tr.main').click(function() { 
    $(this).nextUntil("tr.main").delay(1000).slideToggle("slow"); 
}); 


//To expand all rows for the table... 
$('tr.main').click(function() { 
    $(this).nextAll('.child').delay(1000).slideToggle("slow"); 
});

yo le sue righe padre ora hanno una classe "principale" e le righe figlio hanno la classe "figlio"

Ho aggiunto 2 funzioni che utilizzano slideToggle e funzionano entrambe facendo clic su qualsiasi dove in una riga padre. scegliere la riga padre imposterà di ritardo di 1 secondo e poi le righe figlio per quel genitore si visualizza alternativamente su/giù.

Inoltre, ho aggiunto una funzione commentata che farà scorrereTutte le righe figlio indipendentemente da quale clic del genitore è stato fatto nel caso in cui sia necessario.

Dai un'occhiata a questa risposta, ha anche un jsfiddle con esso che mostra una diapositiva più liscia per le righe della tabella.

Implementing a slide down for table rows

Tutto il merito per mrtsherman

fonte

2013-05-13 12:35:40 Baber

+0

È solo per slidup(), ho bisogno di come toggle() –

+0

hmm, più rapidità di rapidità ... Scusa! – Baber

+0

Se sai come fare, per favore rispondi qui, accetterò la risposta, ne ho bisogno in toggle() –

0

Mescolando tutti i tuoi suggerimenti, ho creato un semplice fiddle che fa effetto slideToggle sulle righe della tabella.

Basta dare il nome della classe toToggle alle righe da alternare e avvolgere il loro contenuto in un div come Typhon suggerito:

$('.toToggle').children('td').wrapInner('<div class="toToggle"></div>');

classe del div può essere la stessa della classe 'tr', in modo da è possibile passare entrambi con una semplice linea di jQuery:.

$('.toToggle').toggle(2000);

(ho aggiunto questa risposta solo per l'effetto slideToggle, che è un po 'poco chiaro nelle altre risposte e difficilissima da trovare googling per passare solo righe specifiche, vedi le altre utili risposte.)

fonte

2014-08-08 14:12:49 T30

 Problemi correlati

  • Nessun problema correlato^_^