Ändern Sie Td-Daten mit jquery Schieberegler auf Bildlauf

Question

Ich muss eine Tabelle als 5x5-Raster anzeigen. Aber die Daten, die ich als JSON-Daten habe, können mehr als 5 Datenspalten haben.

Mit jquery Slider, wie Sie die Daten der Tabelle> td basierend auf dem Schieberegler Scroll ändern.

Ich habe folgende JSON-Objekt:

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"] 
]; 

standardmäßig die Daten wie die Tabelle unten aussieht.

auf dem Slider scroll, müssen die Daten wie folgt geändert werden.

_ _ _ _ _ _ _ _ _ _ _ _ _ __ _ _ _ 
| 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 | 
| _ _ _|_ _ _ | _ _ _|_ _ __|_ _ _ | 

und auf der nächsten blättern sie wie zu ändern,

_ _ _ _ _ _ _ _ _ __ _ _ _ _ _ _ _ 
| 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 | 
|_ _ _ | _ _ _|_ _ __|_ _ _ | _ _ _| 

Könnten Sie bitte vorschlagen, wie diese jquery und Schieber mit zu tun?

Answer 1

In der Zukunft wäre es am besten, ein komplettes Beispiel einzubeziehen. Bitte überprüfen Sie: https://stackoverflow.com/help/mcve

Sie können dies auf mehr als eine Art: Verschieben der Tabelle in einem div, das Überlauf verwendet, Hinzufügen und Entfernen von Daten zu und von der Tabelle, oder was ich entschied, zeigen und verbergen spezifisch Säulen.

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"); 
     } 
    } 
    }); 
}); 

Arbeitsbeispiel: https://jsfiddle.net/Twisty/3osy7fvh/

Hoffe, dass hilft.