Javascript 定期导入学校班级数据的锚定循环器/下拉列表

所以

我最近一直在研究一些html/javascript/css，为我的学生创建一个在线表格，以查看细节、分数和各种信息，但我遇到了困难，不知道如何做我正在尝试做的事情

我之所以在一个线程中发布所有这些内容，是因为我认为其中一些内容可能会冲突，并导致以前的编辑无法正常工作

我意识到其中有很多问题，我不希望有人编写完整的代码，我只是想寻求一些帮助/建议/想法，特别是那些有评论/描述的建议/想法，以便我能够继续学习和改进：）

---

更新13/11/2013@02:43 GMT 最新的：

• 我试图让

  Next Class | Previous Class

  成为循环按钮，以与下拉菜单相同的方式在类之间来回移动
• 由于宽度改变，页面底部的滚动条消失了
• 底部的页脚在移动设备上无法正确显示，而向左滚动和滚动按钮在移动设备上根本无法显示
• 无法单击向左滚动按钮
• 刷新页面会将水平滚动位置重置为最左侧（我很确定这与滚动条有关）

• 关于加载/刷新，我想我必须再写一篇文章，因为当前的选项已经接近了，但还不完全，下面我将举例说明我理想的工作方式

  • main.html

    将不包含任何类的详细信息：
  • “option”（下拉菜单）会以某种方式轮询json文件，以收集可用类的列表
  • “选项”（下拉列表）将为每个学校班级以及“所有更新”和“所有不更新”提供选项
  • 选择单个学校班级将仅将该特定学校班级导入页面
  • 选择不同的单个学校班级将破坏旧学校班级并导入新选择的学校班级
  • 个别学校班级将定期轮询json文件，以检查该学校班级数据的更新/更改，并在更改/更新时重新绘制/重新导入
  • 选择“所有更新”将导入所有学校班级，并定期轮询json文件以检查任何学校班级的更新/更改（如果可能，仅更新已更改/更新的学校班级），但页面上所有班级均可见
  • 选择“All Non Updating”将执行与上述相同的操作，但不需要轮询要更新的json文件
• 我可以很容易地将数据分割成如下块：（第一个块示例）并给它们正确的标题（选项下拉列表中会使用的标题），但不确定如何将它们转换为json格式
1）你必须意识到，你没有像用鼠标滚动那样滚动页面。实际上，您正在操纵左边距，这种行为导致您给它很大的值。那么，看起来你已经告诉我了。桌子和屏幕的末端之间有一个很大的空间。要解决这个问题，您必须添加一个if语句，该语句将检查您是否试图过多地增加剩余保证金

 $("a.def").click(function() {
    $("#gradient-style").each(function(){
        var margin =$(this).css("margin-left");

        if(margin > -204)
             $(this).animate({"margin-left":"+=204px"},200);
        else
             $(this).animate({"margin-left":"+=" +(-margin)},200);
    });
});

5） 您可以使用内置JavaScript功能的localStorage变量。您可以简单地定义任何变量并在会话中使用它。下面是一个例子：

 localStorage.numberOfRow =1;
 console.log(localStorage.numberOfRow);     //1

---

更新2013年11月13日12:09 GMT
就因为你对你的帖子做了一次完整的编辑，我也做了同样的事情！不需要这些数据<不过，我已经回答了您提出的许多问题
最新：
• 我做得很简单，只需使用blow代码：（它被缩小了！）
  以及：

• 这是因为你只是把它放在页脚下1！如果你把它提出来，它就会正确地出现，为什么不放一个半透明的黑色背景呢<代码>背景：rgba（0,0,0,0.58）

• 我没有看到任何问题后，上述变化

• 好主意。。。让我看看

• 再一次，我已经给了你两次如何使用ajax的代码！同样地，您不需要将它们放在json格式中！html格式将是非常伟大的什么你想做！只需将它们另存为class1.html、class2.html、class3.html等，并获得正确的html，然后将表插入容器中，而不是当前表！守则是：

  $.ajax({
  url: "class1.html", //this can be anything! better to use a variable like "class"+currentClass
  dataType: "HTML",
  error: function(){alert("Error on communicate to server"}, //what to do on error
  success: function(html){$("#container").html(html)}, //replace the container on success
  });
  

简单对吧？您可以将

http://fiddle.jshell.net/pwv7u/show/

在url中进行测试，看看会发生什么
• 为什么不把这些选项放在一个html文件中，然后像我提到的那样得到它呢 上面
• 好了，我已经告诉你了

• $（“#container”）.html（SomeHtmlString）

  将使用当前容器更改整个容器
• 你可以。。。（等等）

  setInterval（函数包括jaxname，毫秒）

  （我以前告诉过你）
• 您可以从它们获取所有数据，并使用“+”追加所需内容，然后使用

  $（“container”）.html（TheAppendedHTMLString）

• 你可以有这样的东西=>
• 一件事，对于移动视图，您可以使用一些api，根据正文宽度缩放整个网页！它在平板电脑和移动设备上非常有用。
  
  
祝你好运，如果你不能正确理解我的答案，或者有新的问题，请随时提问。
为了涵盖你的所有问题，我尝试在所有答案中加入演示。不幸的是，我只是一个人，我无法为所有答案创建演示。 如果有人觉得他有什么贡献，请随意评论或编辑
更新 对于@DennisSylvian的更新问题，这里是我的更新<

#container {
margin: 0 auto;
/*overflow: auto;*/
padding: 80px 0;
width: 100%;
}

$("a.def").click(function () {
        $('body').animate({
            "scrollLeft": "-=204"
        }, 200);
});

$("a.abc").click(function () {
    $("body").animate({
            "scrollLeft": "+=204"
        }, 200);
});

$.ajax({
url: "class1.html", //this can be anything! better to use a variable like "class"+currentClass
dataType: "HTML",
error: function(){alert("Error on communicate to server"}, //what to do on error
success: function(html){$("#container").html(html)}, //replace the container on success
});

$('.table-wrapper')[0].scrollLeft += 50;

var offset = 80; // Or any other calculation
$('html,body').animate({
    scrollTop: aTag.offset().top + offset
}, 1);

<td id="class1" class="scrollto">Title</td>
<!-- ... -->
<td id="class2" class="scrollto">Title</td>

var anchorList = [];

$('.scrollto').each(function(){

  anchorList.push( '<option value="'+ this.id +'">'+ this.id +'</option>' );

});

// This is an empty select menu
$('#anchor-list')
  .append( anchorList.join('') )
  .change(function(){

    scrollToAnchor( $(this).val() );

  });

// Put this line
var aTag = $('#' + aid);

// Instead of this one:
var aTag = $("a[id='" + aid + "']");

table td { white-space: nowrap; }

<select id="class-list">
  <option value="1">Class 1</option>
</select>

$('#class-list').change(function(){
  $.get('/server/data/class', { class: $(this).val() }, function(data){
    $('#container').html( data );
  });
});

 $('#container').on('click', 'tr', function(){
   var $this = $(this);

   $this
     .addClass('highlight')
     .siblings('tr')
     .removeClass('highlight');
 });

// Poll every minute
setTimeout(function(){

  // Check for changed content
  $.get('/server/data/changed', function( data ){

    // Server indicates content has changed get the content and update
    if ( data.flag ){

      $.get('/server/data/get', function( data ){
        updateHtml( data );
      });

    }

  });
}, 1000 * 60);

 // On page ready
 jQuery(function( $ ){

   var rowIndex = localStorage.getItem('rowIndex');

   if ( rowIndex ) {

     $( 'table tr' ).eq( rowIndex ).addClass('highlight');

   }

   // Save the row to localstorage based on it's index in the table
   var saveRow = function ( index ) {

     localStorage.setItem( 'rowIndex', index );

   };

   // Highlight the row and save it
   $( 'table tr' ).click(function(){

     var $this = $(this);

     $this
       .addClass('highlight')
       .siblings('tr')
       .removeClass('highlight');

     saveRow( $this.index() );

   });

   // On page exit/reload/change check for highlighted row and "save" it to localstorage
   $(window).on('beforeunload', function(){

     saveRow( $('.highlight').index() );

   });

 });

$("a.abc").click(function () {
    $('#container').animate({
        "scrollLeft": "-=204"
    }, 200);
});

$("a.def").click(function () {
    $("#container").animate({
        "scrollLeft": "+=204"
    }, 200);
});

<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);
});

td, th {
    white-space:nowrap;
}

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.

function scrollToAnchor(aid) {
    var aTag = $("a[id='" + aid + "']");
    $('html,body').animate({
        scrollTop: aTag.offset().top - 80
    }, 1);
}

#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');

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);        
        }
    }

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..
}

    if (jsonTimeout) clearTimeout(jsonTimeout);
    if (jsonRequest) jsonRequest.abort();