jQuery .slideToggle("slow");表格扩展器无法正常工作
Posted
技术标签:
【中文标题】jQuery .slideToggle("slow");表格扩展器无法正常工作【英文标题】：Jquery .slideToggle("slow"); Not work properly for table expander 【发布时间】：2013-05-13 12:26:36 【问题描述】：我尝试按照此处的定义将.slideToggle("slow"); 功能添加到我的表中。 W3Schools
切换效果可以正常工作。我需要像上面的 w3school 链接一样的效果。你可以在JSfiddle看到我的代码
在不使用任何插件的情况下，是否有任何排序方法（表格扩展器）？
这是我的 HTML 表格代码
<table 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
【问题讨论】：
附注：您可以像这样组合 jQuery 选择器：$("#trh1, #trh2").toggle("slow");
【参考方案1】：
Baber 提供了一个指向 mrtsherman 的 jsfiddle 代码的链接。将其修改为：
$('tr').not(':first').children('td').wrapInner('<div>');
$('button').click( function()
$('tr').not(':first').slideToggle();
$('td > div').slideToggle();
);
让它切换。
【讨论】：
【参考方案2】：更新了您的 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
【讨论】：
它只用于 slidup()，我需要它作为 toggle() 嗯，越快越慢……抱歉！ 如果你知道怎么做，请在这里回答，我会接受答案，我需要它在toggle()中 嗨，我添加了一个新的 jsfiddle 使用台风的代码 jsfiddle.net/KLjDz/1 ，非常好的台风！希望对您有所帮助。 感谢@Baber，这是我想要的。但它在 1 秒后打开所有看实际滑动效果的朋友可以试试这个：
将toToggle 类添加到要切换的行
使用相同的toToggle 类将每个<td> 内容包装在<div> 中：
$('.toToggle').children('td').wrapInner('<div class="toToggle"></div>');
要产生滑动效果，<td> 和<div> 需要一起滑动。我们提供了相同的toToggle 类，因此我们可以使用一条 jquery 指令来切换两者
$('.toToggle').toggle(2000);
$('.toToggle').children('td').wrapInner('<div class="toToggle"></div>');
$('.toClick').click(function()
$('.toToggle').toggle('slow');
);.toClick cursor: pointer
.toClick td padding: 15px
.toToggle padding: 15px<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr class="toClick">
<td>click me!</td>
<td>click me!</td>
</tr>
<tr class="toToggle">
<td>text</td>
<td>text</td>
</tr>
<tr class="toToggle">
<td>text</td>
<td>text</td>
</tr>
</table>【讨论】：
以上是关于jQuery .slideToggle("slow");表格扩展器无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章