CODEWITHSUNDEEP
javascriptjquerycss
degys
degys

Reputation: 75

JQuery or Javascript to scroll through table?

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!

Upvotes: 0

Views: 889

Answers (1)

Dave
Dave

Reputation: 10924

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

Upvotes: 1

Related Questions