Question

我想知道是否有一种方法可以淡化表的行或单元格，同时淡化替换内容，而不创建几乎重复的表或表中的表等。

这是我尝试执行的表更改类型的示例：

document.querySelector('table').addEventListener('click', function () {
	this.querySelector('#row1').classList.toggle('hidden')
	this.querySelector('#row2').classList.toggle('hidden')
})

.hidden {
	display: none;
}

<table border="1">
<tr id="row1">
	<td colspan="4">Swap row</td>
</tr>
<tr id="row2" class="hidden">
	<td>Hi</td>
	<td colspan="3">there</td>
</tr>
<tr><td>This</td><td>is</td><td>an</td><td>example</td></tr>
<tr><td>example</td><td>an</td><td>is</td><td>This</td></tr>
</table>

Click the table.

在您说什么之前，我知道display属性无法设置动画。此代码段与我尝试实现（因为我不知道从哪里开始）有关，而与我要操纵的内容类型有关。

我能够管理的最近的（在视觉上）是这样的：

document.querySelector('#table2').addEventListener('click', function () {
	this.classList.toggle('hidden')
	document.querySelector('#table3').classList.toggle('hidden')
})
document.querySelector('#table3').addEventListener('click', function () {
	document.querySelector('#table2').classList.toggle('hidden')
	this.classList.toggle('hidden')
})

.hidden {
	transition: 1s;
	opacity: 0;
}

#table2, #table3 {
	position: absolute;
}

<table id="table2" border="1">
<tr>
	<td colspan="4">Swap row</td>
</tr>
<tr><td>This</td><td>is</td><td>an</td><td>example</td></tr>
<tr><td>example</td><td>an</td><td>is</td><td>This</td></tr>
</table>
<table id="table3" border="1" class="hidden">
<tr>
	<td>Hi</td>
	<td colspan="3">there</td>
</tr>
<tr><td>This</td><td>is</td><td>an</td><td>example</td></tr>
<tr><td>example</td><td>an</td><td>is</td><td>This</td></tr>
</table>

但是，由于各种原因（绝对定位使页面流混乱，冗余内容，分配多个事件侦听器，内容布局重新排列等），这显然不是很好。

Answer 1

淡入动画在表中不起作用。您已使用create表中的div。例如

<div class=table>
  <div class=row>
    <div class=col></div>
    <div class=col></div>
  </div>
</div>

$('.col').click(function() {this.fadeOut(); }) ;

动画淡入淡出表格单元格/行？

1 个答案: