2013-05-13 102 views
5

我尝试将.slideToggle("slow");功能添加到我的表中,如此处所定义的。 W3SchoolsJquery .slideToggle(“slow”);对于表扩展器无法正常工作

切换效果工作,但正确。我需要像上面的w3school链接一样的效果。你可以看到我的代码在JSfiddle

是否有任何排序方法(表扩展器)不使用任何插件?

这里是我的代码为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代码

// 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 
+1

作为一个快速的一面注意:你可以结合使用jQuery选择器,例如:'$(“#trh1,#trh2”)。切换(“慢”);' – 2013-05-13 14:06:04

回答

1

巴伯提供的链接来mrtsherman的的jsfiddle代码。修改它如下:

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

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

使其切换。

0

更新您的jsfiddle代码中看到这个链接>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"); 
}); 

哟你的父行现在有一个“主”类,子行有“子”的类

我已经添加了2个函数,它们使用slideToggle,并通过单击父行上的任何位置来工作。单击父行将设置1秒延迟,然后该父级的子行将向上/向下切换。

我还添加了一个注释掉的函数,它将滑动切换所有子行,而不管父母被点击的情况如何,以防需要它。


看看这个答案,它也有一个jsfiddle它显示一个更平滑的表格行幻灯片。

Implementing a slide down for table rows

所有信贷mrtsherman

+0

它仅适用于滑动(),我需要它作为切换() – 2013-05-13 12:38:48

+0

嗯,更急速的速度...道歉! – Baber 2013-05-13 12:40:25

+0

如果你知道该怎么做,请在这里回答,我会接受答案,我需要切换() – 2013-05-13 12:42:39

0

混合所有提示,我做了一个简单的fiddle,只是对表格行执行slideToggle效果。

只要给类名toToggle到要切换和包装它们的内容就像龙卷风一个div行建议:

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

div的类可以是相同的“TR”类的,所以你可以使用jQuery的一个简单的线切换两种:

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

(我已经添加了这个答案只对了的slideToggle效果,这是在其他的答案和difficoult有点不清楚找到谷歌搜索要只切换具体的行,见其他有用的答案。)