javascript - 滚动表格的 JQuery 或 Javascript？

Question

我正在寻找一个脚本，无论是采用表格的 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/

非常感谢任何帮助!

Answer 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"/>