使用左右动画隐藏/显示动态生成的表列
[英]Hide / show dynamically generated table columns with right / left animation
问题描述
I'm working on the following - working - code: 
我正在研究以下工作-代码：
See it on JsFiddle 在JsFiddle上查看
The HTML is dynamically generated from a XML file which is transformed to HTML by a XSL file. HTML是从XML文件动态生成的，XML文件由XSL文件转换为HTML。 Due to the fact that the number of columns my vary, I used the :nth-child in the JQuery code to hide/show the columns by clicking the relative checkbox. 由于列数可能会有所不同，因此我在JQuery代码中使用了：nth-child来通过单击相对复选框来隐藏/显示列。
As I'm not very good with JQuery I'm stuck on the animation part. 由于我对JQuery不太满意，因此我只能停留在动画部分。 I would like to add an animation to the hide/show action , for example that the checked/unchecked column appears and disappears from left to right. 我想向hide / show动作添加动画 ，例如，选中/未选中列从左到右消失。
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>
2 个解决方案
解决方案1
1 2014-11-25 16:26:16
How about this ? 这个怎么样 ？ http://jsfiddle.net/cdcjy1mg/2/ http://jsfiddle.net/cdcjy1mg/2/
$(".ctable > * > * > :nth-child(" + index + ")").toggle("slow");
You can put the animation you want. 您可以放置所需的动画。 Take a look at jquery effect. 看一下jQuery效果。
Hope this help. 希望能有所帮助。
解决方案2
1 已采纳 2014-11-25 16:55:17
You can try something like this 您可以尝试这样的事情
DEMO http://jsfiddle.net/cdcjy1mg/7/ 演示 http://jsfiddle.net/cdcjy1mg/7/
$(".ctable > * > * > :nth-child(" + index + ")").toggleClass('hidden');
CSS 的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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.