Javascript 使用右/左动画隐藏/显示动态生成的表列
我正在编写以下工作代码： HTML是从XML文件动态生成的，XML文件通过XSL文件转换为HTML。由于我的列数不同，我在JQuery代码中使用了：n子项，通过单击相对复选框来隐藏/显示列 由于我对JQuery不是很在行，我被困在动画部分我想向隐藏/显示动作添加一个动画，例如，选中/未选中列从左到右显示和消失Javascript 使用右/左动画隐藏/显示动态生成的表列,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在编写以下工作代码： HTML是从XML文件动态生成的，XML文件通过XSL文件转换为HTML。由于我的列数不同，我在JQuery代码中使用了：n子项，通过单击相对复选框来隐藏/显示列 由于我对JQuery不是很在行，我被困在动画部分我想向隐藏/显示动作添加一个动画，例如，选中/未选中列从左到右显示和消失 body { font-size: 9pt; font-family: arial; padding: 0px; margin: 0px; } .htab
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>
正文{
字号：9pt；
字体系列：arial；
填充：0px；
边际：0px；
}
.htable{
边界间距：0；
边界塌陷：塌陷；
边框：1px纯黑；
边距：0自动0自动；
}
.htable tr，th，td{
边框：1px纯黑；
}
.ctable{
边界间距：0；
边界塌陷：塌陷；
边框：1px纯黑；
边距：0自动0自动；
}
GoPro 1
GoPro 2
GoPro 3
GoPro 4
GoPro 1
GoPro 2
GoPro 3
GoPro 4
视频分辨率
4K
4K
4K
4K
超宽
超宽
超宽
超宽
3840x2160
3840x2160
3840x2160
3840x2160
$（文档）.ready（函数（）{
/*显示隐藏列*/
var f=函数（）{
风险值指数=$（“：复选框”）。指数（本）+2；
$（“.ctable>*>*>：第n个子项（“+index+”））.toggle（选中此项）；
};
$（“：复选框”）。单击（f）。每个（f）；
});
希望对您有所帮助。您可以尝试类似的方法 演示 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;
}
哦我很生气，因为我不知道该把（这个.勾选的）部分放在哪里！是否可以通过在左侧滑动来隐藏所有列？toggle（“slow”）不是很平滑。如果你看toggle，带有toggle（真/假）的选项不接受任何其他选项。使用
font size:0 $(".ctable > * > * > :nth-child(" + index + ")").toggleClass('hidden');
.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;
}