我正在嘗試做手風琴錶行。 我想展開/摺疊按鈕點擊表格行。 (加(+)按鈕展開該行並減去( - )按鈕以摺疊該行)手風琴錶行和刷新頁面後不變的錶行
它應該以與標題相同的方式工作。 默認情況下,最初在所有行打開的頁面摺疊並且 在刷新頁面後保持表格的當前條件不變。
這是我真正想要做的圖像: Output Image
下面是代碼
CSS:
table, tr, td, th
{
border: 1px solid black;
border-collapse:collapse;
}
HTML:
<table border="0">
<thead>
<tr>
<th>Large<a class="LargeToggleAll" href="#">+</a></th>
<th>Medium<a class="MediumToggleAll" href="#">+</a></th>
<th>Small</th>
</tr>
</thead>
<tr id="test1" class="pa-dt-master-account-level"
data-account-level="master">
<td>
<a class="pa-dt-toggle toggleLarge" href="#">+</a>
Test1
</td>
<td></td>
<td></td>
</tr>
<tbody data-owner="test1">
<!-- GROUP ACCOUNT -->
<tr id="test1-1" class="pa-dt-group-account-level"
data-owner="test1" data-account-level="group">
<td></td>
<td><a class="pa-dt-toggle toggleMedium" href="#">+</a>Test1-1</td>
<td></td>
</tr>
</tbody>
<tbody data-owner="test1">
<tr id="test1-1-1" class="pa-dt-account-level" data-owner="test1-1"
data-account-level="account">
<td></td>
<td></td>
<td>Test1-1-1</td>
</tr>
</tbody>
<tbody data-owner="test1">
<tr id="test1-1-2" class="pa-dt-account-level" data-owner="test1-1"
data-account-level="account">
<td></td>
<td></td>
<td>Test1-1-2</td>
</tr>
</tbody>
<tbody data-owner="test1">
<!-- GROUP ACCOUNT -->
<tr id="test1-2" class="pa-dt-group-account-level"
data-owner="test1" data-account-level="group">
<td></td>
<td><a class="pa-dt-toggle toggleMedium" href="#">+</a>Test1-2</td>
<td></td>
</tr>
</tbody>
<tbody data-owner="test1">
<tr id="test1-2-1" class="pa-dt-account-level" data-owner="test1-2"
data-account-level="account">
<td></td>
<td></td>
<td>Test1-2-1</td>
</tr>
</tbody>
<tr id="test2" class="pa-dt-master-account-level"
data-account-level="master">
<td>
<a class="pa-dt-toggle toggleLarge" href="#">+</a>
Test2
</td>
<td></td>
<td></td>
</tr>
<tbody data-owner="test2">
<!-- GROUP ACCOUNT -->
<tr id="test2-1" class="pa-dt-group-account-level"
data-owner="test2" data-account-level="group">
<td></td>
<td><a class="pa-dt-toggle toggleMedium" href="#">+</a>Test2-1</td>
<td></td>
</tr>
</tbody>
<tbody data-owner="test2">
<tr id="test2-1-1" class="pa-dt-account-level" data-owner="test2-1"
data-account-level="account">
<td></td>
<td></td>
<td>Test2-1-1</td>
</tr>
</tbody>
<tbody data-owner="test2">
<tr id="test2-1-2" class="pa-dt-account-level" data-owner="test2-1"
data-account-level="account">
<td></td>
<td></td>
<td>Test2-1-2</td>
</tr>
</tbody>
<tbody data-owner="test2">
<!-- GROUP ACCOUNT -->
<tr id="test2-2" class="pa-dt-group-account-level"
data-owner="test2" data-account-level="group">
<td></td>
<td><a class="pa-dt-toggle toggleMedium" href="#">+</a>Test2-2</td>
<td></td>
</tr>
</tbody>
<tbody data-owner="test2">
<tr id="test2-2-1" class="pa-dt-account-level" data-owner="test2-2"
data-account-level="account">
<td></td>
<td></td>
<td>Test2-2-1</td>
</tr>
</tbody>
</table>
的javascript:
$(function() {
// Hide all group and account level
$('.pa-dt-group-account-level').hide();
$('.pa-dt-account-level').hide();
// Define our button for toggling
var button = $("a.pa-dt-toggle");
button.click(function() {
// get the parent ID
var parentId = $(this).parents('tr').attr("id");
// get the parent account level
var accountType = $(this).parents('tr').attr("data-account-level");
console.log(parentId);
console.log(accountType);
$(this).text($(this).text() == '+' ? '-' : '+');
if ($(this).hasClass("pa-dt-toggle-active")) {
$(this).removeClass('pa-dt-toggle-active');
$('[data-owner="' + parentId +'"]').hide();
} else {
$(this).addClass('pa-dt-toggle-active');
$('[data-owner="' + parentId +'"]').show();
}
});
button.click(function(e){
e.stopPropagation();
});
$('.LargeToggleAll').click(function() {
$(this).text($(this).text() == '+' ? '-' : '+');
$(".toggleLarge").each(function(){
if ($(this).hasClass("pa-dt-toggle-active")) {
$(this).removeClass('pa-dt-toggle-active');
$('[data-account-level="group"]').hide();
$('[data-account-level="account"]').hide();
$(this).text("+");
$(".MediumToggleAll").text("+");
} else {
$(this).addClass('pa-dt-toggle-active');
$('[data-account-level="group"]').show();
$(this).text("-");
}
})
});
$('.MediumToggleAll').click(function() {
$(this).text($(this).text() == '+' ? '-' : '+');
$(".toggleMedium").each(function(){
if ($(this).hasClass("pa-dt-toggle-active")) {
$(this).removeClass('pa-dt-toggle-active');
$('[data-account-level="account"]').hide();
$(".toggleMedium").text("+");
} else {
$(this).addClass('pa-dt-toggle-active');
$('.MediumToggleAll').addClass('pa-dt-toggle-active');
$('[data-account-level="group"]').show();
$('[data-account-level="account"]').show();
$(".toggleLarge").text("-");
$(".toggleMedium").text("-");
$(".LargeToggleAll").text("-");
}
})
});
});
https://jsfiddle.net/y4Mdy/2494/然而,它似乎沒有按預期工作。 我希望任何人都可以幫助我。
不使用表。嘗試使用定位,填充,邊距... – TricksfortheWeb
同意@TricksfortheWeb –