我正在寻找一个脚本,无论是采用表格的 JQuery 还是 Javacript。并允许用户单击“向右滚动”或“向左滚动”按钮,然后它会隐藏第一列然后显示下一个隐藏列,反之亦然。那里有类似的东西吗?
我根据它的样子制作了一个外壳。
<table class="sample" id="tableone">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td class="hidden">Saturday</td>
<td class="hidden">June</td>
<td class="hidden">Gemini</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td class="hidden">Tuesday</td>
<td class="hidden">>October</td>
<td class="hidden">>Libra</td>
</tr>
</table>
<input id="scrollLeft" class="button" type="button" value="Scroll Left"/>
<input id="scrollRight" class="button" type="button" value="Scroll Right"/>
https://jsfiddle.net/ct8seoha/1/
非常感谢任何帮助!
最佳答案
我在下面模拟了几个函数。他们目前不进行任何边界检查,因此可能需要为此进行增强。
运行示例并通过单击“向右滚动”开始。
$(function() {
$(".sample tr").each(function() {
$(this).find("td").each(function(index) {
if (index === 0)
$(this).show();
else
$(this).hide();
});
});
});
$("#scrollLeft").click(function() {
$(".sample tr").each(function() {
$(this).find("td:visible").each(function() {
$(this).hide().prev("td").show();
});
});
});
$("#scrollRight").click(function() {
$(".sample tr").each(function() {
$(this).find("td:visible").each(function() {
$(this).hide().next("td").show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="sample" id="tableone">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td class="hidden">Saturday</td>
<td class="hidden">June</td>
<td class="hidden">Gemini</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td class="hidden">Tuesday</td>
<td class="hidden">>October</td>
<td class="hidden">>Libra</td>
</tr>
</table>
<input id="scrollLeft" class="button" type="button" value="Scroll Left"/>
<input id="scrollRight" class="button" type="button" value="Scroll Right"/>
关于javascript - 滚动表格的 JQuery 或 Javascript?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31527783/