Toggle table - 增加行跨度以容纳额外的切换行
Toggle table - increase rowspan to accommodate extra toggled row
我有一个 table 可以使用按钮或单击行进行切换。问题是当第一列跨越 2 行或更多行时,一切都会不同步。还希望底部边框在切换区域下方移动,并且悬停区域背景颜色与其他行对齐(由于 rowspan,目前仅适用于第一行)。希望这是有道理的,有人可以帮助解决这个问题。
$(document).ready(function() {
$("#hide").click(function() {
$(".toggle").hide();
});
$("#show").click(function() {
$(".toggle").show();
});
$("#data tr td").click(function() {
$(this).parents(".pointer").next().toggle();
});
});
table {
border-collapse: collapse;
margin-top: 20px;
}
table,
th {
border: solid 1px;
padding: 10px;
}
tr:hover td {
background: #e5e5e5;
}
.toggle {
display: none;
}
.toggle.active {
display: table-row;
}
.pointer {
cursor: pointer;
border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="hide">Hide All</button>
<button id="show">Show All</button>
<table>
<tr>
<th>header</th>
<th>header</th>
<th>header</th>
<th>header</th>
<th>header</th>
</tr>
<tbody id="data">
<tr class="pointer">
<td style="border-bottom:1px solid;" >DATA1</td>
<td style="border-bottom:1px solid;">data1</td>
<td style="border-bottom:1px solid;">data1</td>
<td style="border-bottom:1px solid;">data1</td>
<td style="border-bottom:1px solid;">data1</td>
</tr>
<tr class="toggle">
<td></td>
<td colspan="4">toggled area 1a</td>
</tr>
<tr class="pointer">
<td style="border-bottom:1px solid;" rowspan="2">DATA2</td>
<td>data2</td>
<td>data2</td>
<td>data2</td>
<td>data2</td>
</tr>
<tr class="toggle">
<td></td>
<td colspan="4">toggled area 2a</td>
</tr>
<tr class="pointer">
<td style="border-bottom:1px solid;">data2</td>
<td style="border-bottom:1px solid;">data2</td>
<td style="border-bottom:1px solid;">data2</td>
<td style="border-bottom:1px solid;">data2</td>
</tr>
<tr class="toggle">
<td></td>
<td colspan="4">toggled area 2b</td>
</tr>
<tr class="pointer">
<td rowspan="3">DATA3</td>
<td>data3</td>
<td>data3</td>
<td>data3</td>
<td>data3</td>
</tr>
<tr class="toggle">
<td></td>
<td colspan="4">toggled area 3a</td>
</tr>
<tr class="pointer">
<td>data3</td>
<td>data3</td>
<td>data3</td>
<td>data3</td>
</tr>
<tr class="toggle">
<td></td>
<td colspan="4">toggled area 3b</td>
</tr>
<tr class="pointer">
<td>data3</td>
<td>data3</td>
<td>data3</td>
<td>data3</td>
</tr>
<tr class="toggle">
<td></td>
<td colspan="4">toggled area 3c</td>
</tr>
</tbody>
</table>
- 首先将每个数据区包裹在一个
<tbody>
中。
- 所有
tr.toggle
应该有 只有一个 <td>
并且它应该有 colspan='4'
- 只有每个
<tbody>
的第一个 <td>
具有 class .pointer
和 rowspan
等于所述 [ 的初始可见行数=13=]。 ex. 第一个 <tbody>
最初有一行所以 td.pointer
因为 <tbody>
有一个 rowspan='1'
.
- 当嵌套在
tr.toggle
中的 <td>
以外的 <td>
被点击并且现在可见时,相应的 .pointer
rowspan
增加 1 .
当 tr.toggle
不可见时,.pointer
rowspan
减 1。
- 数据区1和2的最后一个
<tr>
有个不可点击的<td colspan='5'>
里面有一个<hr>
。
$("#all").on('click', function(e) {
$(this).toggleClass('show hide');
toggleRow(e);
});
$('.pointer').on('click', toggleRow);
$("td").not('.toggle > td').on('click', toggleRow);
function toggleRow(e) {
if (e.target.matches('td')) {
var toggle = $(this).parent().next('.toggle');
var data = $(this).closest('tbody');
var pointer = data.find('.pointer');
var rowspan = Number(pointer.attr('rowspan'));
toggle.toggle();
if (toggle.is(':visible')) {
pointer.prop('rowspan', `${rowspan+=1}`);
if (e.target.matches('.borderA')) {
data.find('.borderA').css('border-width', '0');
}
} else {
pointer.prop('rowspan', `${rowspan-=1}`);
if (e.target.matches('.borderA')) {
data.find('.borderA').css('border-width', '1px');
}
}
} else if (e.target.matches('#all')) {
$('tbody').each(function() {
var pointer = $(this).find('.pointer');
var rows = $(this).children().length;
var rowspan = Number(pointer.attr('rowspan'));
if ($('#all').hasClass('hide')) {
$('.toggle').show();
pointer.attr('rowspan', rows);
$(this).find('.borderA').css('border-width', '0');
} else {
$('.toggle').hide();
pointer.attr('rowspan', rowspan);
$(this).find('.borderA').css('border-width', '1px');
}
});
}
return false;
};
table {
margin-top: 20px;
border-spacing: 0;
}
table,
th {
border: solid 1px #000;
}
tr:hover td,
tbody:hover .pointer {
background: #e5e5e5;
}
.toggle {
display: none;
text-align: center
}
.pointer {
border: 0;
border-bottom: 1px solid #000;
}
.border,
.borderA {
border-bottom: 1px solid #000;
}
#all {
width: 10ch;
}
#all.hide::before {
content: 'Hide ';
}
#all.show::before {
content: 'Show ';
}
<button id="all" class='show'>All</button>
<table>
<thead>
<tr>
<th>header</th>
<th>header</th>
<th>header</th>
<th>header</th>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<th class="pointer show" rowspan='1'>DATA1</th>
<td class='borderA'>data1</td>
<td class='borderA'>data1</td>
<td class='borderA'>data1</td>
<td class='borderA'>data1</td>
</tr>
<tr class="toggle">
<td class='border' colspan="4">1A</td>
</tr>
</tbody>
<tbody>
<tr>
<th class='pointer show' rowspan="2">DATA2</th>
<td>data2</td>
<td>data2</td>
<td>data2</td>
<td>data2</td>
</tr>
<tr class="toggle">
<td colspan="4">2A</td>
</tr>
<tr>
<td class='borderA'>data2</td>
<td class='borderA'>data2</td>
<td class='borderA'>data2</td>
<td class='borderA'>data2</td>
</tr>
<tr class="toggle">
<td class='border' colspan="4">2B</td>
</tr>
</tbody>
<tbody>
<tr>
<th class="pointer show" rowspan="3">DATA3</th>
<td>data3</td>
<td>data3</td>
<td>data3</td>
<td>data3</td>
</tr>
<tr class="toggle">
<td colspan="4">3A</td>
</tr>
<tr>
<td>data3</td>
<td>data3</td>
<td>data3</td>
<td>data3</td>
</tr>
<tr class="toggle">
<td colspan="4">3B</td>
</tr>
<tr>
<td class='borderA'>data3</td>
<td class='borderA'>data3</td>
<td class='borderA'>data3</td>
<td class='borderA'>data3</td>
</tr>
<tr class="toggle">
<td class='border' colspan="4">3C</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
我有一个 table 可以使用按钮或单击行进行切换。问题是当第一列跨越 2 行或更多行时,一切都会不同步。还希望底部边框在切换区域下方移动,并且悬停区域背景颜色与其他行对齐(由于 rowspan,目前仅适用于第一行)。希望这是有道理的,有人可以帮助解决这个问题。
$(document).ready(function() {
$("#hide").click(function() {
$(".toggle").hide();
});
$("#show").click(function() {
$(".toggle").show();
});
$("#data tr td").click(function() {
$(this).parents(".pointer").next().toggle();
});
});
table {
border-collapse: collapse;
margin-top: 20px;
}
table,
th {
border: solid 1px;
padding: 10px;
}
tr:hover td {
background: #e5e5e5;
}
.toggle {
display: none;
}
.toggle.active {
display: table-row;
}
.pointer {
cursor: pointer;
border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="hide">Hide All</button>
<button id="show">Show All</button>
<table>
<tr>
<th>header</th>
<th>header</th>
<th>header</th>
<th>header</th>
<th>header</th>
</tr>
<tbody id="data">
<tr class="pointer">
<td style="border-bottom:1px solid;" >DATA1</td>
<td style="border-bottom:1px solid;">data1</td>
<td style="border-bottom:1px solid;">data1</td>
<td style="border-bottom:1px solid;">data1</td>
<td style="border-bottom:1px solid;">data1</td>
</tr>
<tr class="toggle">
<td></td>
<td colspan="4">toggled area 1a</td>
</tr>
<tr class="pointer">
<td style="border-bottom:1px solid;" rowspan="2">DATA2</td>
<td>data2</td>
<td>data2</td>
<td>data2</td>
<td>data2</td>
</tr>
<tr class="toggle">
<td></td>
<td colspan="4">toggled area 2a</td>
</tr>
<tr class="pointer">
<td style="border-bottom:1px solid;">data2</td>
<td style="border-bottom:1px solid;">data2</td>
<td style="border-bottom:1px solid;">data2</td>
<td style="border-bottom:1px solid;">data2</td>
</tr>
<tr class="toggle">
<td></td>
<td colspan="4">toggled area 2b</td>
</tr>
<tr class="pointer">
<td rowspan="3">DATA3</td>
<td>data3</td>
<td>data3</td>
<td>data3</td>
<td>data3</td>
</tr>
<tr class="toggle">
<td></td>
<td colspan="4">toggled area 3a</td>
</tr>
<tr class="pointer">
<td>data3</td>
<td>data3</td>
<td>data3</td>
<td>data3</td>
</tr>
<tr class="toggle">
<td></td>
<td colspan="4">toggled area 3b</td>
</tr>
<tr class="pointer">
<td>data3</td>
<td>data3</td>
<td>data3</td>
<td>data3</td>
</tr>
<tr class="toggle">
<td></td>
<td colspan="4">toggled area 3c</td>
</tr>
</tbody>
</table>
- 首先将每个数据区包裹在一个
<tbody>
中。 - 所有
tr.toggle
应该有 只有一个<td>
并且它应该有colspan='4'
- 只有每个
<tbody>
的第一个<td>
具有 class.pointer
和rowspan
等于所述 [ 的初始可见行数=13=]。 ex. 第一个<tbody>
最初有一行所以td.pointer
因为<tbody>
有一个rowspan='1'
. - 当嵌套在
tr.toggle
中的<td>
以外的<td>
被点击并且现在可见时,相应的.pointer
rowspan
增加 1 .
当 .pointer
rowspan
减 1。- 数据区1和2的最后一个
<tr>
有个不可点击的<td colspan='5'>
里面有一个<hr>
。
tr.toggle
不可见时,$("#all").on('click', function(e) {
$(this).toggleClass('show hide');
toggleRow(e);
});
$('.pointer').on('click', toggleRow);
$("td").not('.toggle > td').on('click', toggleRow);
function toggleRow(e) {
if (e.target.matches('td')) {
var toggle = $(this).parent().next('.toggle');
var data = $(this).closest('tbody');
var pointer = data.find('.pointer');
var rowspan = Number(pointer.attr('rowspan'));
toggle.toggle();
if (toggle.is(':visible')) {
pointer.prop('rowspan', `${rowspan+=1}`);
if (e.target.matches('.borderA')) {
data.find('.borderA').css('border-width', '0');
}
} else {
pointer.prop('rowspan', `${rowspan-=1}`);
if (e.target.matches('.borderA')) {
data.find('.borderA').css('border-width', '1px');
}
}
} else if (e.target.matches('#all')) {
$('tbody').each(function() {
var pointer = $(this).find('.pointer');
var rows = $(this).children().length;
var rowspan = Number(pointer.attr('rowspan'));
if ($('#all').hasClass('hide')) {
$('.toggle').show();
pointer.attr('rowspan', rows);
$(this).find('.borderA').css('border-width', '0');
} else {
$('.toggle').hide();
pointer.attr('rowspan', rowspan);
$(this).find('.borderA').css('border-width', '1px');
}
});
}
return false;
};
table {
margin-top: 20px;
border-spacing: 0;
}
table,
th {
border: solid 1px #000;
}
tr:hover td,
tbody:hover .pointer {
background: #e5e5e5;
}
.toggle {
display: none;
text-align: center
}
.pointer {
border: 0;
border-bottom: 1px solid #000;
}
.border,
.borderA {
border-bottom: 1px solid #000;
}
#all {
width: 10ch;
}
#all.hide::before {
content: 'Hide ';
}
#all.show::before {
content: 'Show ';
}
<button id="all" class='show'>All</button>
<table>
<thead>
<tr>
<th>header</th>
<th>header</th>
<th>header</th>
<th>header</th>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<th class="pointer show" rowspan='1'>DATA1</th>
<td class='borderA'>data1</td>
<td class='borderA'>data1</td>
<td class='borderA'>data1</td>
<td class='borderA'>data1</td>
</tr>
<tr class="toggle">
<td class='border' colspan="4">1A</td>
</tr>
</tbody>
<tbody>
<tr>
<th class='pointer show' rowspan="2">DATA2</th>
<td>data2</td>
<td>data2</td>
<td>data2</td>
<td>data2</td>
</tr>
<tr class="toggle">
<td colspan="4">2A</td>
</tr>
<tr>
<td class='borderA'>data2</td>
<td class='borderA'>data2</td>
<td class='borderA'>data2</td>
<td class='borderA'>data2</td>
</tr>
<tr class="toggle">
<td class='border' colspan="4">2B</td>
</tr>
</tbody>
<tbody>
<tr>
<th class="pointer show" rowspan="3">DATA3</th>
<td>data3</td>
<td>data3</td>
<td>data3</td>
<td>data3</td>
</tr>
<tr class="toggle">
<td colspan="4">3A</td>
</tr>
<tr>
<td>data3</td>
<td>data3</td>
<td>data3</td>
<td>data3</td>
</tr>
<tr class="toggle">
<td colspan="4">3B</td>
</tr>
<tr>
<td class='borderA'>data3</td>
<td class='borderA'>data3</td>
<td class='borderA'>data3</td>
<td class='borderA'>data3</td>
</tr>
<tr class="toggle">
<td class='border' colspan="4">3C</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>