在滾動條上使用jquery滑塊更改td數據

Question

我必須將表格顯示爲5x5網格。但是作爲json數據的數據可能有5列以上的數據。

使用jquery滑塊，如何根據滑動條滾動更改表格> td的數據。

我有以下JSON對象：

var tData = [ 
    ["R1C1","R1C2","R1C3","R1C4","R1C5","R1C6","R1C7","R1C8","R1C9"], 
    ["R2C1","R2C2","R2C3","R2C4","R2C5","R2C6","R2C7","R2C8","R2C9"], 
    ["R3C1","R3C2","R3C3","R3C4","R3C5","R3C6","R3C7","R3C8","R3C9"], 
    ["R4C1","R4C2","R4C3","R4C4","R4C5","R4C6","R4C7","R4C8","R4C9"], 
    ["R5C1","R5C2","R5C3","R5C4","R5C5","R5C6","R5C7","R5C8","R5C9"] 
]; 

默認數據看起來像見下表。

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ __ 
| R1C1 | R1C2 | R1C3 | R1C4 | R1C5 | 
|_ _ _ | _ _ _ _ _ _ | _ _ _|_ _ _ | 
| R2C1 | R2C2 | R2C3 | R2C4 | R2C5 | 
|_ _ _ | _ _ _ _ _ _ | _ _ _|_ _ _ | 
| R3C1 | R3C2 | R3C3 | R3C4 | R3C5 | 
|_ _ _ | _ _ _ _ _ _ | _ _ _|_ _ _ | 
| R4C1 | R4C2 | R4C3 | R4C4 | R4C5 | 
|_ _ _ | _ _ _ _ _ _ | _ _ _|_ _ _ | 
| R5C1 | R5C2 | R5C3 | R5C4 | R5C5 | 
|_ _ _ | _ _ _ _ _ _ | _ _ _|_ _ __| 

在滑動條上，數據必須像下面那樣改變。

_ _ _ _ _ _ _ _ _ _ _ _ _ __ _ _ _ 
| R1C2 | R1C3 | R1C4 | R1C5 | R1C6 | 
| _ _ _|_ _ _ | _ _ _|_ _ _ |_ _ _ | 
| R2C2 | R2C3 | R2C4 | R2C5 | R2C6 | 
| _ _ _|_ _ _ | _ _ _|_ _ _ |_ _ _ | 
| R3C2 | R3C3 | R3C4 | R3C5 | R3C6 | 
| _ _ _|_ _ _ | _ _ _|_ _ _ |_ _ _ | 
| R4C2 | R4C3 | R4C4 | R4C5 | R4C6 | 
| _ _ _|_ _ _ | _ _ _|_ _ _ |_ _ _ | 
| R5C2 | R5C3 | R5C4 | R5C5 | R5C6 | 
| _ _ _|_ _ _ | _ _ _|_ _ __|_ _ _ | 

，並在下次滾動它會改變一樣，

_ _ _ _ _ _ _ _ _ __ _ _ _ _ _ _ _ 
| R1C3 | R1C4 | R1C5 | R1C6 | R1C7 | 
|_ _ _ | _ _ _|_ _ _ |_ _ _ | _ _ _| 
| R2C3 | R2C4 | R2C5 | R2C6 | R2C7 | 
|_ _ _ | _ _ _|_ _ _ |_ _ _ | _ _ _| 
| R3C3 | R3C4 | R3C5 | R3C6 | R3C7 | 
|_ _ _ | _ _ _|_ _ _ |_ _ _ | _ _ _| 
| R4C3 | R4C4 | R4C5 | R4C6 | R4C7 | 
|_ _ _ | _ _ _|_ _ _ |_ _ _ | _ _ _| 
| R5C3 | R5C4 | R5C5 | R5C6 | R5C7 | 
|_ _ _ | _ _ _|_ _ __|_ _ _ | _ _ _| 

能否請你建議如何使用jQuery和滑塊來做到這一點？

Answer 1

未來，最好包括一個完整的例子。請回顧：https://stackoverflow.com/help/mcve

您可以通過多種方式實現此目的：在使用溢出的div內移動表格，在表格中添加和刪除數據或我選擇的內容，顯示和隱藏特定列。

HTML

<div class="ui-widget"> 
    <table id="table-1" class="datatable"> 
    <tbody></tbody> 
    </table> 
    <div id="slider"></div> 
</div> 

CSS

.datatable { 
    border-collapse: collapse; 
    margin: .5em 1em; 
} 

.datatable tbody { 
    font-family: Arial, sans-serif; 
} 

.datatable tbody tr td { 
    border: 1px solid #ccc; 
    padding: .2em .4em; 
} 

td.hide { 
    display: none; 
} 

#slider { 
    width: 280px; 
    margin: 0 1em; 
} 

的JavaScript

var tData = [ 
    ["R1C1", "R1C2", "R1C3", "R1C4", "R1C5", "R1C6", "R1C7", "R1C8", "R1C9"], 
    ["R2C1", "R2C2", "R2C3", "R2C4", "R2C5", "R2C6", "R2C7", "R2C8", "R2C9"], 
    ["R3C1", "R3C2", "R3C3", "R3C4", "R3C5", "R3C6", "R3C7", "R3C8", "R3C9"], 
    ["R4C1", "R4C2", "R4C3", "R4C4", "R4C5", "R4C6", "R4C7", "R4C8", "R4C9"], 
    ["R5C1", "R5C2", "R5C3", "R5C4", "R5C5", "R5C6", "R5C7", "R5C8", "R5C9"] 
]; 

$(function() { 
    var $t = $("#table-1"); 
    var maxCol = 5; 
    var cell = 0; 
    // Populate the table 
    $.each(tData, function(k1, v1) { 
    // Create Rows 
    var $row = $("<tr>", { 
     id: "row-" + (k1 + 1), 
     class: "row" 
    }); 
    $.each(v1, function(k2, v2) { 
     if (k2 < maxCol) { 
     $("<td>", { 
      class: "show col col-" + (k2 + 1), 
      id: "cell-" + cell++ 
     }).html(v2).appendTo($row); 
     } else { 
     $("<td>", { 
      class: "hide col col-" + (k2 + 1), 
      id: "cell-" + cell++ 
     }).html(v2).appendTo($row); 
     } 
    }); 
    $row.appendTo($t); 
    }); 

    $("#slider").slider({ 
    min: 0, 
    max: tData[0].length - maxCol, 
    value: 0, 
    slide: function(e, ui) { 
     var i = ui.value + 1; 
     var m = ui.value + maxCol; 
     // Hide all 
     $(".show").toggleClass("show hide"); 
     // Show just specific columns based on slider value 
     for (i; i <= m; i++) { 
     $(".col-" + i).removeClass("hide").addClass("show"); 
     } 
    } 
    }); 
}); 

工作實例：https://jsfiddle.net/Twisty/3osy7fvh/

希望有所幫助。