在滚动时使用 jquery 滑块更改 td 数据

Posted 2023-05-08

【中文标题】在滚动时使用 jquery 滑块更改 td 数据

【英文标题】：Change td data using jquery slider on scroll

【发布时间】：2018-02-12 19:00:23

【问题描述】：

我必须将表格显示为 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 和滑块来执行此操作？

【参考方案1】：

将来，最好包含一个完整的示例。请查看：https://***.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/

希望对您有所帮助。

【讨论】：

滑块示例与使用溢出：jsfiddle.net/Twisty/3osy7fvh/12

老兄。优秀。我将尝试微调类似于 jqGrid 的一点点。与其隐藏 td，不如替换那些 td 的数据。如果您有时间，请通过 jqGrid 参数查询。虽然列数更多，但在拖动滑块期间，呈现数据会有延迟。它已经在 jqGrid 中被克服了。