JQuery or Javascript to scroll through table?

Question

I'm looking for a script out there whether it be JQuery or Javacript that takes a table. And allows the user to click on either a "Scroll Right" or "Scroll Left" button and then it would hide the first column then show the next hidden column and vice versa. Is there anything like that out there?

I made a shell of what it would look like.

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

Any help is immensely appreciated!

Answer 1

I mocked up a couple of functions below. They currently don't do any boundary checking, so they would probably have to be enhanced for that.

Run the example and start by clicking "Scroll Right".

 $(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"/>