在过去的两天里，我一直在为这段代码苦苦挣扎，也许有人可以指出我正确的方向？
基本上这个表需要像 jQuery 日历一样工作，点击顶部的下一个按钮应该带你到下一列 + 突出显示，并且顶部的“事件 1”块中的内容也应该改变，一旦你位于最后一列，然后单击下一步，将新列滑入表中，因此它从 E2-E7 开始，依此类推。
我开始认为这在 jQuery 中甚至是不可能的，但话又说回来，我的 jQuery 技能相当生锈。谁能告诉我我想要的是否可能以及提示或帮助？
代码可以在这里找到：http: //jsfiddle.net/yunowork/wDAdp/2/
演示：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.
}
});
这并不是您所要求的一切，但足以为您提供一个坚实的开端。
你仍然找到你需要的东西吗？
如果没有，您可以执行以下操作。
HTML
<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>
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 个表。展示不同之处以及如何使用它。