1

在过去的两天里，我一直在为这段代码苦苦挣扎，也许有人可以指出我正确的方向？

基本上这个表需要像 jQuery 日历一样工作，点击顶部的下一个按钮应该带你到下一列 + 突出显示，并且顶部的“事件 1”块中的内容也应该改变，一旦你位于最后一列，然后单击下一步，将新列滑入表中，因此它从 E2-E7 开始，依此类推。

我开始认为这在 jQuery 中甚至是不可能的，但话又说回来，我的 jQuery 技能相当生锈。谁能告诉我我想要的是否可能以及提示或帮助？

代码可以在这里找到：http: //jsfiddle.net/yunowork/wDAdp/2/

4

2 回答 2

0

演示：http: //jsfiddle.net/wDAdp/5/

$(".next").click(function(e){
    e.preventDefault();
    var $nextCol = $('.highlighted').next('td'); // Grab the next column
    if($nextCol.length != 0){ //If it exists
        $('.highlighted').removeClass("highlighted"); //Remove previous highlight
        $nextCol.addClass("highlighted"); // add highlight to the new column
    }else{
        // Add a new column here.
    }
});

这并不是您所要求的一切，但足以为您提供一个坚实的开端。

于 2012-09-06T20:48:24.637 回答
0

你仍然找到你需要的东西吗？

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

HTML

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

    <tr>
      <td colspan="2" class="emptyrace"></td>
      <td colspan="6" class="race"><a class="previous" href="#">◄&lt;/a><span class="event"></span><a class="next" href="#">►&lt;/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>

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

JSFiddle 示例：https ://jsfiddle.net/synz/182xtgoL/

我在那个 JSFiddle 示例中使用了 2 个表。展示不同之处以及如何使用它。

于 2018-09-04T07:33:45.737 回答