我正在研究以下 - 工作 - 代码:
HTML 是从 XML 文件动态生成的，XML 文件通过 XSL 文件转换为 HTML。由于列数不同，我在 JQuery 代码中使用 :nth-child 通过单击相关复选框来隐藏/显示列。
由于我不太擅长 JQuery，所以我一直停留在动画部分。 我想为隐藏/显示 Action 添加动画，例如选中/未选中的列从左到右出现和消失。
body {
font-size: 9pt;
font-family: arial;
padding: 0px;
margin: 0px;
}
.htable {
border-spacing: 0;
border-collapse: collapse;
border: 1px solid black;
margin: 0 auto 0 auto;
}
.htable tr, th, td {
border: 1px solid black;
}
.ctable {
border-spacing: 0;
border-collapse: collapse;
border: 1px solid black;
margin: 0 auto 0 auto;
}
<body>
<table class="htable">
<thead>
<tr>
<th>GoPro 1</th>
<th>GoPro 2</th>
<th>GoPro 3</th>
<th>GoPro 4</th>
</tr>
<tr>
<th>
<input checked="checked" type="checkbox">
</th>
<th>
<input checked="checked" type="checkbox">
</th>
<th>
<input checked="checked" type="checkbox">
</th>
<th>
<input checked="checked" type="checkbox">
</th>
</tr>
</thead>
</table>
<table class="ctable">
<thead>
<tr>
<th></th>
<th colspan="1">GoPro 1</th>
<th colspan="1">GoPro 2</th>
<th colspan="1">GoPro 3</th>
<th colspan="1">GoPro 4</th>
</tr>
</thead>
<tbody>
<tr>
<th class="separator">Video resolution</th>
<td class="values odd separator">4K</td>
<td class="values odd separator">4K</td>
<td class="values odd separator">4K</td>
<td class="values odd separator">4K</td>
</tr>
<tr>
<th></th>
<td class="values odd">Ultra wide</td>
<td class="values odd">Ultra wide</td>
<td class="values odd">Ultra wide</td>
<td class="values odd">Ultra wide</td>
</tr>
<tr>
<th></th>
<td class="values odd">3840x2160</td>
<td class="values odd">3840x2160</td>
<td class="values odd">3840x2160</td>
<td class="values odd">3840x2160</td>
</tr>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
/* Show hide columns */
var f = function() {
var index = $(":checkbox").index(this) + 2;
$(".ctable > * > * > :nth-child(" + index + ")").toggle(this.checked);
};
$(":checkbox").click(f).each(f);
});
</script>
</body>
最佳答案
你可以试试这样的东西
演示 http://jsfiddle.net/cdcjy1mg/7/
$(".ctable > * > * > :nth-child(" + index + ")").toggleClass('hidden');
CSS
.hidden {
width: 0;
opacity: 0;
font-size: 0;
padding: 0;
margin: 0;
border: 0;
}
.htable tr, th, td {
border: 1px solid black;
width: 100px;
transition: all 0.3s ease-in-out;
opacity: 1;
border-collapse: collapse;
padding: 0;
margin: 0;
}
关于javascript - 使用右/左动画隐藏/显示动态生成的表格列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27131611/