HTML表格，固定列onload和可水平滚动到左/右滚动箭头的下一列

Question

In HTML tables I want to make fixed number of columns to be appear on load and should be scrollable horizontally and on click of left or right arrow of scroll want to jump to next column with its values. Any solution that helps with this problem ?

Answer 1

Maybe this can help :

 var id_min; var id_max; var gap; function display_col(min, max){ $("td").each(function(){ if($(this).index()<min || $(this).index()>max){ $(this).addClass("hidden"); }else{ $(this).removeClass("hidden"); } }) } /* Next column */ function change_col(next){ if(next){ id_max++; id_min++; }else{ id_max--; id_min--; } /* Prevent error */ if(id_min<0){ id_min=0; } if(id_max<gap){ id_max=gap; } if(id_max>$("tr:first-child() td").length){ id_max=$("tr:first-child() td").length; } if(id_min>$("tr:first-child() td").length-gap){ id_min=$("tr:first-child() td").length-gap; } /* Display again */ display_col(id_min, id_max); } $(document).ready(function(){ /* Add column nb */ $("td").each(function(){ $(this).children(".nb").text("-"+($(this).index()+1)); }) /* Display only some columns */ id_min = 0; id_max = 1; /* Any number */ gap=id_max-id_min; display_col(id_min,id_max); }) 

 .container{ width: 100px; overflow: auto; } table{ border-collapse: collapse; } td{ border-color: black; border-width: 10px; border-left: solid; border-right: solid; padding: 6px; min-width: 100px; text-align: center; } tr{ border: 3px solid red; } .hidden{ display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <table> <tr> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> </tr> <tr> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> </tr> <tr> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> </tr> <tr> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> </tr> <tr> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> </tr> <tr> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> </tr> <tr> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> <td>Value col<span class="nb">NONE</span></td> </tr> </table> </div> <button type="button" onclick="change_col(false)">Prev</button> <button type="button" onclick="change_col(true)">Next</button>