我正在尝试制作一个可扩展的表格,其中许多行都有一个按钮,您可以按下该按钮为每行切换子行。这似乎正在起作用,但我希望它从关闭子行开始。我该怎么做?
$(document).ready(function() {
$('.RowToClick').click(function() {
$(this).nextAll('tr').each(function() {
if ($(this).is('.RowToClick')) {
return false;
}
$(this).toggle();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<table border=0>
<tr class="RowToClick">
<td><button>+</button></td>
<td>hello</td>
</tr>
<tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
<tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
<tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
<tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
<tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
</table>
<table border=0>
<tr class="RowToClick"><button>+</button></tr>
<tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
<tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
<tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
<tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
<tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
</table>
<table border=0>
<tr class="RowToClick"><button>+</button></tr>
<tr><td>Data Row 1 Goes Here...</td></tr>
<tr><td>Data Row 2 Goes Here...</td></tr>
<tr><td>Data Row 3 Goes Here...</td></tr>
<tr><td>Data Row 4 Goes Here...</td></tr>
<tr><td>Data Row 5 Goes Here...</td></tr>
</table>
只需在 jquery 中添加一行
$('.RowToClick').nextAll('tr').toggle();
并将行名放在同一个TD喜欢按钮中
<td><button>+</button> Row 1</td>
所以它看起来像
$(document).ready(function() {
$('.RowToClick').nextAll('tr').toggle();
$('.RowToClick').click(function() {
$(this).nextAll('tr').each(function() {
if ($(this).is('.RowToClick')) {
return false;
}
$(this).toggle();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<table border=0>
<tr class="RowToClick"><td><button>+</button> Row 1</td></tr>
<tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
<tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
<tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
<tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
<tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
</table>
<table border=0>
<tr class="RowToClick"><td><button>+</button> Row 2</td></tr>
<tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
<tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
<tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
<tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
<tr><td class="additionalRow">Data Row 1 Goes Here...</td></tr>
</table>
<table border=0>
<tr class="RowToClick"><td><button>+</button> Row 3</td></tr>
<tr><td>Data Row 1 Goes Here...</td></tr>
<tr><td>Data Row 2 Goes Here...</td></tr>
<tr><td>Data Row 3 Goes Here...</td></tr>
<tr><td>Data Row 4 Goes Here...</td></tr>
<tr><td>Data Row 5 Goes Here...</td></tr>
</table>
在 tr 中添加 td
<tr class="RowToClick">
<td>
<button>+</button>
</td>
<td>hello</td>
</tr>
演示
.CSS
.RowToClick ~ tr{
display :none;
}