i'm looking script out there whether jquery or javacript takes table. , allows user click on either "scroll right" or "scroll left" button , hide first column show next hidden column , vice versa. there out there?
i made shell of 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 immensely appreciated!
i mocked couple of functions below. don't boundary checking, have enhanced that.
run example , start 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"/>
Comments
Post a Comment