Javascript jQuery表滚动

在过去的两天里，我一直在努力处理这段代码，也许有人能给我指出正确的方向

基本上，该表需要像jQuery日历一样工作，单击顶部的“下一步”按钮会将您带到下一列并突出显示，顶部“事件1”块中的内容也会更改，一旦您到达最后一列并单击“下一步”，一个新列就会滑入表中，从E2-E7开始，依此类推

我开始认为这在jQuery中甚至是不可能的，但我的jQuery技能已经相当过时了。有人能告诉我我想要的是可能的和一个提示或一些帮助吗

代码可以在这里找到：

演示：

---

这并不是你所要求的全部，但足以给你一个坚实的开端。

你还找到你需要的东西吗

如果没有，您可以执行以下操作

HTML

玩家
E1
E2
E3
E4
E5
E6
E7
杰夫
凯文
威廉

JAVASCRIPT

$.fn.c_tbl = function(){

    var range       = parseInt($("tr:eq(0) td:eq(1)",this).attr("colspan")); // range for visiblity(td) based on colspan

    $("tr",this) // Find all tr and its td
    .not("tr:eq(0)").each(function(m,n){
        $(this).find("td:not(:eq(0))").each(function(x,y){
            if(x>=range)
                $(this).hide(); // Hide the rest of the td that outside of range (colspan)
        });
    });

    $(this).highlighted(1); // highlight 1st td (default active, can change to any index.)

    $(".previous",this).on("click",function(e){
        var target  = $(this).parents("table");
        var active  = parseInt($("tr:eq(1)",target).find("td.highlighted").index());
        var ind_first_visible   = parseInt($("tr:eq(1)",target).find("td:not(:eq(0)):visible:first").index());
        var ind_last_visible    = parseInt($("tr:eq(1)",target).find("td:not(:eq(0)):visible:last").index());

        if(active>1){ // Prevent previous action after reached 1st event

            if(active == ind_last_visible && active !== range){
                $(target).show_td(ind_first_visible-1);
                $(target).hide_td(ind_first_visible+range-1);
            }

            $(target).highlighted(active-1);    
            $("tr",target).not("tr:eq(0)").find("td:eq("+active+")").removeClass("highlighted");

        }

        e.preventDefault();
    });

    $(".next",this).on("click",function(e){
        var target  = $(this).parents("table");
        var active  = $("tr:eq(1)",target).find("td.highlighted").index();
        var ind_last_visible    = $("tr:eq(1)",target).find("td:not(:eq(0)):visible:last").index();

        if(active < $("tr:eq(1)",target).find("td").length-1){ // Prevent next action after reached last event

            if(active == ind_last_visible){
                $(target).show_td(ind_last_visible+1);
                $(target).hide_td(ind_last_visible-range+1);
            }

            $(target).highlighted(active+1);
            $("tr",target).not("tr:eq(0)").find("td:eq("+active+")").removeClass("highlighted");

        }

        e.preventDefault();
    });

};

$.fn.highlighted = function(x){
    /*
        x = index of td to be highlighted
        funtion to hightlight the active `td` 
        change its title event name
    */

    var top_title   = $("tr:eq(0) td:eq(1)",this);
    var e_title     = $("tr:eq(1) td:eq("+x+")",this).data("e1")+"<br>"+$("tr:eq(1) td:eq("+x+")",this).data("e2");

    $(".event",top_title).html(e_title); // Change events name

    $("tr",this)
    .not("tr:eq(0)") // Ignore 1st row because this row is for event
    .find("td:eq("+x+")")
    .addClass("highlighted"); // Add class to next active `td`
};

$.fn.show_td = function(x){ // Funtion to show the `td` 
    // x = index of td to be show
    $("tr",this).not("tr:eq(0)").find("td:eq("+x+")").show();
};

$.fn.hide_td = function(x){ // Funtion to hide the `td` 
    // x = index of td to be hide
    $("tr",this).not("tr:eq(0)").find("td:eq("+x+")").hide();
};

$(".tbl-1").c_tbl(); // Example for the 1st table with different colspan value

$.fn.c\u tbl=函数（）{
var range=parseInt（$（tr:eq（0）td:eq（1）”，this.attr（“colspan”）；//基于colspan的可视性范围（td）
$（“tr”，this）//查找所有tr及其td
.不是（“tr:eq（0）”）。每个（函数（m，n）{
$（this）.find（“td:not（：eq（0））”）。每个（函数（x，y）{
如果（x>=范围）
$（this.hide（）；//隐藏超出范围（colspan）的td的其余部分
});
});
$（this）.highlighted（1）；//highlight 1st td（默认活动，可以更改为任何索引。）
$（“.previous”，this.）。on（“click”，函数（e）{
var target=$（this.parents（“表”）；
var active=parseInt（$（$tr:eq（1）”，target.find（“td.highlighted”）.index（））；
var ind_first_visible=parseInt（$（“tr:eq（1）”，target）.find（“td:not（：eq（0））：visible:first”）.index（）；
var ind_last_visible=parseInt（$（“tr:eq（1）”，target）.find（“td:not（：eq（0））：visible:last”）.index（）；
如果（活动>1）{//在到达第一个事件后阻止以前的操作
如果（活动==ind\u last\u可见和活动！==range）{
$（目标）。显示时间（ind\u first\u visible-1）；
$（目标）.hide_td（ind_first_visible+range-1）；
}
$（目标）。突出显示（活动-1）；
$（“tr”，target）.not（“tr:eq（0）”）.find（“td:eq（“+active+”））.removeClass（“突出显示”）；
}
e、 预防默认值（）；
});
$（“.next”，this）.on（“click”，函数（e）{
var target=$（this.parents（“表”）；
var active=$（（tr:eq（1）”，target.find（“td.highlighted”）.index（）；
var ind_last_visible=$（“tr:eq（1）”，target）.find（“td:not（：eq（0））：visible:last”）.index（）；
if（active<$（tr:eq（1）”，target.find（“td”）.length-1）{//在到达最后一个事件后阻止下一个操作
如果（活动==ind\u last\u可见）{
$（目标）。显示时间（ind\u last\u visible+1）；
$（目标）.hide_td（ind_last_visible-range+1）；
}
$（目标）。突出显示（活动+1）；
$（“tr”，target）.not（“tr:eq（0）”）.find（“td:eq（“+active+”））.removeClass（“突出显示”）；
}
e、 预防默认值（）；
});
};
$.fn.highlighted=函数（x）{
/*
x=要突出显示的td索引
高亮显示活动“td”的功能
更改其标题事件名称
*/
var top_title=$（“tr:eq（0）td:eq（1）”，本）；
var e_title=$（“tr:eq（1）td:eq（+x+”），this）。数据（“e1”）+”
“+$”（“tr:eq（1）td:eq（+x+”），this）。数据（“e2”）；
$（“.event”，top_title）.html（e_title）；//更改事件名称
$（“tr”，本）
.not（“tr:eq（0）”//忽略第1行，因为该行用于事件
.查找（“td:eq（“+x+”））
.addClass（“突出显示”）；//将类添加到下一个活动的`td`
};
$.fn.show_td=函数（x）{//function以显示'td`
//x=待显示的td指数
$（“tr”，this）.not（“tr:eq（0）”）.find（“td:eq（“+x+”））.show（）；
};
$.fn.hide_td=函数（x）{//function隐藏'td`
//x=要隐藏的td索引
$（“tr”，this）.not（“tr:eq（0）”）.find（“td:eq（+x+））.hide（）；
};
$（“.tbl-1”）.c_tbl（）；//具有不同colspan值的第一个表的示例

JSFIDLE示例：

---

在这个JSFIDLE示例中，我使用了两个表。展示不同的功能以及如何使用它

那么…基本上你想对E1~E n列进行分页吗？是的，这是我最费劲的部分。非常感谢！非常接近您的代码，但还不太接近。请注意，

$nextCol

是

td

的集合，而不仅仅是一个。因此，如果要添加新列，可能需要通过

.each（）

<table class="tbl-1">
<tbody>

    <tr>
      <td colspan="2" class="emptyrace"></td>
      <td colspan="6" class="race"><a class="previous" href="#">◄</a><span class="event"></span><a class="next" href="#">►</a></td>
    </tr>
    <tr>
      <td colspan="2" class="raceorder"><strong>Player</strong></td>
      <td id="r1" data-e1="Event 1" data-e2="Miami - 10:00" class="roundnumber"><strong>E1</strong></td>
      <td id="r2" data-e1="Event 2" data-e2="Miami - 10:00" class="roundnumber"><strong>E2</strong></td>
      <td id="r3" data-e1="Event 3" data-e2="Miami - 10:00" class="roundnumber"><strong>E3</strong></td>
      <td id="r4" data-e1="Event 4" data-e2="Miami - 10:00" class="roundnumber"><strong>E4</strong></td>
      <td id="r5" data-e1="Event 5" data-e2="Miami - 10:00" class="roundnumber"><strong>E5</strong></td>
      <td id="r6" data-e1="Event 6" data-e2="Miami - 10:00" class="roundnumber"><strong>E6</strong></td>
      <td id="r7" data-e1="Event 7" data-e2="Miami - 10:00" class="roundnumber"><strong>E7</strong></td>
    </tr>
    <tr class="selectionrow">
      <td colspan="2">Jeff</td>
      <td id="r1"><input type="checkbox" name="race1" value="R1"></td>
      <td id="r2"><input type="checkbox" name="race1" value="R2"></td>
      <td id="r3"><input type="checkbox" name="race1" value="R3"></td>
      <td id="r4"><input type="checkbox" name="race1" value="R4"></td>
      <td id="r5"><input type="checkbox" name="race1" value="R5"></td>
      <td id="r6"><input type="checkbox" name="race1" value="R6"></td>
      <td id="r6"><input type="checkbox" name="race1" value="R6"></td>
    </tr>
    <tr class="selectionrow">
      <td colspan="2">Kevin</td>
      <td id="r1"><input type="checkbox" name="race2" value="R1"></td>
      <td id="r2"><input type="checkbox" name="race2" value="R2"></td>
      <td id="r3"><input type="checkbox" name="race2" value="R3"></td>
      <td id="r4"><input type="checkbox" name="race2" value="R4"></td>
      <td id="r5"><input type="checkbox" name="race2" value="R5"></td>
      <td id="r6"><input type="checkbox" name="race2" value="R6"></td>
      <td id="r6"><input type="checkbox" name="race2" value="R6"></td>
    </tr>
    <tr class="selectionrow">
      <td colspan="2">William</td>
      <td id="r1"><input type="checkbox" name="race3" value="R1"></td>
      <td id="r2"><input type="checkbox" name="race3" value="R2"></td>
      <td id="r3"><input type="checkbox" name="race3" value="R3"></td>
      <td id="r4"><input type="checkbox" name="race3" value="R4"></td>
      <td id="r6"><input type="checkbox" name="race3" value="R5"></td>
      <td id="r6"><input type="checkbox" name="race3" value="R6"></td>
      <td id="r6"><input type="checkbox" name="race3" value="R6"></td>
    </tr>
  </tbody>
</table>

$.fn.c_tbl = function(){

    var range       = parseInt($("tr:eq(0) td:eq(1)",this).attr("colspan")); // range for visiblity(td) based on colspan

    $("tr",this) // Find all tr and its td
    .not("tr:eq(0)").each(function(m,n){
        $(this).find("td:not(:eq(0))").each(function(x,y){
            if(x>=range)
                $(this).hide(); // Hide the rest of the td that outside of range (colspan)
        });
    });

    $(this).highlighted(1); // highlight 1st td (default active, can change to any index.)

    $(".previous",this).on("click",function(e){
        var target  = $(this).parents("table");
        var active  = parseInt($("tr:eq(1)",target).find("td.highlighted").index());
        var ind_first_visible   = parseInt($("tr:eq(1)",target).find("td:not(:eq(0)):visible:first").index());
        var ind_last_visible    = parseInt($("tr:eq(1)",target).find("td:not(:eq(0)):visible:last").index());

        if(active>1){ // Prevent previous action after reached 1st event

            if(active == ind_last_visible && active !== range){
                $(target).show_td(ind_first_visible-1);
                $(target).hide_td(ind_first_visible+range-1);
            }

            $(target).highlighted(active-1);    
            $("tr",target).not("tr:eq(0)").find("td:eq("+active+")").removeClass("highlighted");

        }

        e.preventDefault();
    });

    $(".next",this).on("click",function(e){
        var target  = $(this).parents("table");
        var active  = $("tr:eq(1)",target).find("td.highlighted").index();
        var ind_last_visible    = $("tr:eq(1)",target).find("td:not(:eq(0)):visible:last").index();

        if(active < $("tr:eq(1)",target).find("td").length-1){ // Prevent next action after reached last event

            if(active == ind_last_visible){
                $(target).show_td(ind_last_visible+1);
                $(target).hide_td(ind_last_visible-range+1);
            }

            $(target).highlighted(active+1);
            $("tr",target).not("tr:eq(0)").find("td:eq("+active+")").removeClass("highlighted");

        }

        e.preventDefault();
    });

};

$.fn.highlighted = function(x){
    /*
        x = index of td to be highlighted
        funtion to hightlight the active `td` 
        change its title event name
    */

    var top_title   = $("tr:eq(0) td:eq(1)",this);
    var e_title     = $("tr:eq(1) td:eq("+x+")",this).data("e1")+"<br>"+$("tr:eq(1) td:eq("+x+")",this).data("e2");

    $(".event",top_title).html(e_title); // Change events name

    $("tr",this)
    .not("tr:eq(0)") // Ignore 1st row because this row is for event
    .find("td:eq("+x+")")
    .addClass("highlighted"); // Add class to next active `td`
};

$.fn.show_td = function(x){ // Funtion to show the `td` 
    // x = index of td to be show
    $("tr",this).not("tr:eq(0)").find("td:eq("+x+")").show();
};

$.fn.hide_td = function(x){ // Funtion to hide the `td` 
    // x = index of td to be hide
    $("tr",this).not("tr:eq(0)").find("td:eq("+x+")").hide();
};

$(".tbl-1").c_tbl(); // Example for the 1st table with different colspan value