我有一个表格，显示不同级别的数据（父级，子级，孙子级），当我点击父级时，它显示与子级别相关的新行，如果我点击子级，则显示第三级作为孙子更多行。
我想要做的是在每条记录上添加一个带有“+”符号的按钮，所以当我点击它时，我会看到第二级，然后用“ - ”符号将该按钮从父级切换到另一级。为了模拟扩展和折叠功能，我想为子级别也这样做。
现在，如果我点击一行，列会展开或折叠，但如果我点击要添加的按钮，我想要这样做。
这是我的代码：
$('.drillDown tr td:last-child, .drillDown tr th:last-child').hide();
$('.drillDown tr td:first-child, .drillDown tr th:first-child').dblclick(function(){
$('.drillDown tr td:last-child, .drillDown tr th:last-child').show();
})
$('table.drillDown').each(function() {
var $table = $(this);
$table.find('.parent').dblclick(function() {
console.log( "*****Click on Parent" );
$(this).nextUntil('.parent', ".child").toggle("fast");
$(this).nextUntil('.parent', ".grandson").hide("fast");
});
$table.find('.child').dblclick(function() {
console.log( "*****Click on child" );
$(this).nextUntil('.child', ".grandson").toggle("fast");
});
var $childRows = $table.find('tbody tr').not('.parent').hide();
$table.find('button.hide').dblclick(function() {
$childRows.hide();
});
$table.find('button.show').dblclick(function() {
console.log("*****Click on Child");
$childRows.filter('.child').show();
});
$table.find('tr.child').dblclick(function(){
$(this).nextUntil('.child').show()
});
});
还有我完整的例子
https://jsfiddle.net/ny6qcxtd/2/
谢谢！
答案 0 :(得分：4)
changed with following fiddle
答案 1 :(得分：2)
您可以使用jquery
中的.click（处理程序）功能为您的按钮添加操作EX。
$( "#target" ).click(function() {
alert( "Handler for .click() called." );
});
其中target是您按钮的ID。
答案 2 :(得分：2)
看看这些代码，它的设计简单，性能更高 可能会帮助你，
<div class="row">
<div class="col-lg-12 text-center">
<table class="table table condensed drillDown">
<thead>
<!--SUB HEADER 2-->
<tr style="background-color: #E3E3E3">
<!--SALES-->
<th></th>
<th style="text-align: center">Categories</th>
<th style="text-align: center">LW $</th>
<th style="text-align: center">LW</th>
<th style="text-align: center">L4 W</th>
<th style="text-align: center">L13 W</th>
<th style="text-align: center">L52 W</th>
</tr>
</thead>
<tbody>
<tr class="parent" style="cursor:pointer">
<td style="font-family: arial,sans-serif; font-weight: bold; padding: 0px;font-size: 20px;">+ </td>
<td>33 D33 GIRLS DRESS </td>
<td>$1,564.90</td>
<td>1.5%</td>
<td>1.7%</td>
<td>6.4%</td>
<td>1.1%</td>
</tr>
<tr class="child" style="background-color: #D8E8B7">
<td style="font-family: arial,sans-serif; font-weight: bold; padding: 0px; font-size: 20px;">+</td>
<td>05 D05 MOVIES</td>
<td>$897.56</td>
<td>2.2%</td>
<td>1.34%</td>
<td>4.7%</td>
<td>8.9%</td>
</tr>
<tr class="grandson" style="background-color: #D8E8FF">
<td style="font-family: arial,sans-serif; font-weight: bold; padding: 0px; font-size: 20px;">+</td>
<td>05 D05 MOVIES</td>
<td>$897.56</td>
<td>2.2%</td>
<td>1.34%</td>
<td>4.7%</td>
<td>8.9%</td>
</tr>
<tr class="child" style="background-color: #D8E8B7">
<td style="font-family: arial,sans-serif; font-weight: bold; padding: 0px; font-size: 20px;">+</td>
<td>06 D06 BATTERIES</td>
<td>$2,673.99</td>
<td>1.3%</td>
<td>0.7%</td>
<td>7.5%</td>
<td>3.6%</td>
</tr>
<tr class="parent" style="cursor:pointer">
<td style="font-family: arial,sans-serif; font-weight: bold; padding: 0px; font-size: 20px;">+</td>
<td>19 D19 HOME DECOR</td>
<td>$1,673.99</td>
<td>3.3%</td>
<td>5.7%</td>
<td>2.5%</td>
<td>3.6%</td>
</tr>
<tr class="child" style="background-color: #D8E8B7">
<td style="font-family: arial,sans-serif; font-weight: bold; padding: 0px; font-size: 20px;">+</td>
<td>34 D34 LDS WVN TOPS</td>
<td>$2,673.99</td>
<td>1.3%</td>
<td>0.7%</td>
<td>7.5%</td>
<td>3.6%</td>
</tr>
<tr class="child" style="background-color: #D8E8B7">
<td style="font-family: arial,sans-serif; font-weight: bold; padding: 0px; font-size: 20px;">+</td>
<td>72 D72 AUDIO HARDWARE</td>
<td>$2,673.99</td>
<td>1.3%</td>
<td>0.7%</td>
<td>7.5%</td>
<td>3.6%</td>
</tr>
<tr class="child" style="background-color: #D8E8B7">
<td style="font-family: arial,sans-serif; font-weight: bold; padding: 0px; font-size: 20px;">+</td>
<td>72 D72 UNASSIGNED</td>
<td>$2,673.99</td>
<td>1.3%</td>
<td>0.7%</td>
<td>7.5%</td>
<td>3.6%</td>
</tr>
<tr class="child" style="background-color: #D8E8B7">
<td style="font-family: arial,sans-serif; font-weight: bold; padding: 0px; font-size: 20px;">+</td>
<td>87 D87 UNLOCKED PHONES</td>
<td>$2,673.99</td>
<td>1.3%</td>
<td>0.7%</td>
<td>7.5%</td>
<td>3.6%</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.row -->
</div>
现在你可以用你的GUID绑定简单的onclick函数，并在用户打开任何行时添加用你的+替换的类。
所以，没有必要绑定按钮，
如果您需要任何进一步的帮助，请在评论中ping我。
答案 3 :(得分：1)
$(".classOfButton").click(function() {
$(".classOfWhatYouWantToExpand").fadeToggle("slow", "linear")
});
因此，在单击按钮时使用jQuery .fadeToggle（）函数。只需注意你的目标是什么，并适当地使用课程或内容。
答案 4 :(得分：1)
$("#target").click(function() {
alert("click event");
});
$("#target").submit(function() {
alert("submit event");
});
答案 5 :(得分：1)
只需绑定按钮单击功能，参见下面的代码。
表示exa。
$( "#dataTable tbody tr" ).on( "click", function() {
console.log( $( this ).text() );
});
看起来像你的代码，
$( "#target" ).on( "click", function() {
console.log( $( this ).text() );
});