javascript - HTML 表格，固定列加载并可水平滚动到左/右滚动箭头单击的下一列

Question

在 HTML 表格中，我想让固定数量的列在加载时出现，并且应该可以水平滚动，并且在单击滚动的左箭头或右箭头时想要跳转到下一列及其值。任何有助于解决此问题的解决方案？

Answer 1

也许这可以帮助:

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>