Question

我需要一些帮助来向上/向下滑动表格内容，一列（左/右）。因此，假设该表有10行，但我可以一次显示4行。该表有10列，我一次只能显示5列。现在我需要滚动行/列。任何帮助表示赞赏。

我尝试隐藏行/列，但为了移动一行，我需要获取第一个可见行的id和最后一个可见行的id。那就是我目前所困的地方。有没有办法找到第一个可见行/列的Id。也是最后一个可见行/列的Id。这会有所帮助。

Answer 1

您无需使用ID。首先存储与变量相关的所有内容：约束，但更重要的是当前可见的行/列ID - 或索引，然后在移动行/列时增加/减少。

有些事情：

(function () {
    var $rows = $('.my-row'),
        numberOfRows = $rows.length,
        // assuming there is no colspan magic at work
        numberOfCols = $rows.children().first().length, 

        visibleRows = 4,
        visibleCols = 5,

        firstVisibleRow = 0, // not 1 because Arrays are 0-indexed
        firstVisibleCol = 0,

       moveDown = function () {
           $rows.slice(firstVisibleRow, numberOfRows).hide();
           firstVisibleRow += visibleRows;
           $rows.slice(firstVisibleRow, numberOfRows).show();
       },

       moveRight = function () {
           var newFirstVisibleCol = firstVisibleCol + visibleCols,
               i, len,
               currentRow;

           for (i = 0, len = $rows.length; i < len; i++) {
               currentRow = $rows.eq(i).children(); // TDs of current Row
               currentRow.slice(firstVisibleCol, visibleCols).hide();
               currentRow.slice(newFirstVisibleCol, visibleCols).show();
           }

           firstVisibleCol = newVisibleCol;
       },

       moveUp = function () {
           // ...
       }

       moveLeft = function () {
           // ...
       };


    // initialise the table, hide rows/cols 6 and on
    // bind events
    // etc
    // ...
}());

一旦你有了这个，不要忘记添加逻辑来处理你的numberOfRows / numberOfCols，这样你就不能“滚动”超过表格的边界。

<小时/> 回应下面的评论 - 因为我不能在评论中使用代码标签：

例如，您可以使用

<buttonid="makeitMoveRight">Move 5 cols to the right</button>

然后使用

$("#makeItMoveRight").click(moveRight); // or
$("#makeItMoveRight").bind("click", moveRight) // which essentially do the same

在上面的闭包（外部函数）中。您可能需要在函数表达式中添加一个额外的参数，例如

// add a parameter for the event passed by jQuery
moveRight = function (event) {
    // ... rest of the function here ...

    // also, add this:
    event.preventDefault();
}

如果您的控件元素是锚点或按钮，则可以防止默认行为（例如提交周围的表单或关注链接/跳到顶部）。

使用JQuery滑动表内容

1 个答案: