让我们看看（向下滚动以获取更新）
（演示在http://jsfiddle.net/u7UkS/2/）
左右表格滚动器（修复过度滚动？）
您需要scrollLeft为margin. 它会自动处理多余的值，因为它不能滚动超过允许的范围。
$("a.abc").click(function () {
$('#container').animate({
"scrollLeft": "-=204"
}, 200);
});
$("a.def").click(function () {
$("#container").animate({
"scrollLeft": "+=204"
}, 200);
});
锚循环器/下拉列表跳转到每个类？
您可以遍历a元素，获取它们id并填充select元素。然后班级change事件并动画到选定的位置scrollToAnchor
<select class="class-selector">
<option value="">-select class-</option>
</select>
和
// gather CLASS info
var selector = $('.class-selector').on('change', function(){
var id = this.value;
if (id!==''){
scrollToAnchor(id);
}
});
$('a[id^="CLASS"]').each(function(){
var id = this.id,
option = $('<option>',{
value: this.id,
text:this.id
});
selector.append(option);
});
列自动调整？
只需设置white-space:nowrap为th/td元素
td, th {
white-space:nowrap;
}
从 JSON 加载/更新类部分。
您尚未为此提供任何代码。所以我将只描述如何做到这一点..
对于重复的 AJAX 请求，请使用超时，一旦你处理了它的结果，就会触发一个新的
function handleData(data){
//loop over data and edit the DOM
$.each(data, function(index, item){
// variable item refers to the current CLASS of the iteration
// assuming that the JSON is an array of CLASS groups describing the rows..
//find the DOM section with the current class info and update data..
});
setTimeout(checkData, 30000);
}
function checkData(){
$.getJSON('the-url-to-your-json', handleData);
}
// initiate the first timeout
setTimout(checkData, 30000); // 30000 ms is 30sec.
饼干？记住和恢复选定的行
不需要使用 cookie，只是在第 4 步中不要删除整行并重新插入，而是编辑元素的内容td。这样，tr将保持其class样式并且样式将持续存在。或者，如果它具有类，则在覆盖行 chack 之前，如果有selected，则将其添加到您将要插入的行中。
演示在 http://jsfiddle.net/u7UkS/2/
我还编辑了您的scrollToAnchor并从 scrollTop 中删除了 80 以说明标题
function scrollToAnchor(aid) {
var aTag = $("a[id='" + aid + "']");
$('html,body').animate({
scrollTop: aTag.offset().top - 80
}, 1);
}
更新
假设您对问题的更新，您不需要一直显示所有课程，也不需要更新所有课程
您可以使用此 css 和代码根据对下拉列表的选择来显示/隐藏 CLASSes
#container tbody, #container thead {
display:none;
}
#container tbody.current {
display:table-row-group;
}
#container thead.current {
display:table-header-group;
}
和
var classSelector = $('.class-selector');
// gather CLASS info
classSelector.on('change', function () {
var id = this.value;
$('#container').find('thead, tbody').removeClass('current');
if (id !== '') {
//scrollToAnchor(id);
var group = $('#' + id).closest('thead');
group.add(group.next('tbody'))
.addClass('current');
}
// since we changed the current CLASS, initiate a checkdata() so that we can update as soon as possible..
checkData();
}).trigger('change');
现在，当我们执行 AJAX 请求时，我们可以向服务器发送一些数据以限制返回的信息。所以在checkData我们做
function checkData() {
var currentId = classSelector.val();
if (currentId !== ''){
// Start AJAX request
alert('starting ajax request for ' + currentId);
// change /echo/json/ with the url to your json
// delay should be removed, it just for jsfiddle..
jsonRequest = $.getJSON('/echo/json/', {'delay':2,'class' : currentId}, handleData);
}
}
和handleData
function handleData(data) {
alert('handling data');
//loop over data and edit the DOM
var classBody = $('#container').find('tbody.current');
$.each(data, function (index, item) {
// variable item refers to the current CLASS of the iteration
// assuming that the JSON is an array of CLASS groups describing the rows..
// populate classBody with the JSON data
});
jsonTimeout = setTimeout(checkData, 10000); // change the 10000 to whatever you want.. i set it to 10 seconds to see the repeating..
}
你会注意到jsonTimeout = setTimeout(..) and jsonRequest = $.getJSON(..)。我们将它们存储在变量中，以便在更改当前 CLASS 时可以中止它们以避免过度处理
这是通过添加
if (jsonTimeout) clearTimeout(jsonTimeout);
if (jsonRequest) jsonRequest.abort();
到change下拉列表的处理程序。
在http://jsfiddle.net/u7UkS/4/更新了演示