通过使用json或html文件使用jQuery ajax自动刷新/更新表

使用ajax非常简单，
我建议您为此使用HTML数据类型，因为您在容器中有一个表，
这里有一个api文档=>
http://api.jquery.com/jQuery.ajax/
这是我的小提琴为您 量身定做=>
http://jsfiddle.net/sijav/kHtuQ/19/或http://fiddle.jshell.net/sijav/kHtuQ/19/show/

我已经将ajax代码放在名为updateClass（url ）哪个url代表要获取的url，它将在容器中附加要获取的HTML =>

function updateClass(url){    $.ajax({        url: url,        dataType: "HTML",        error: function(msg){ alert(msg.statusText); return msg;        },        success: function(html){ $("#container").html(html);        }    });}

我添加了一个refreshClass，它刷新了整个容器类，=>

function refreshClass(){ updateClass("http://fiddle.jshell.net/sijav/mQB5E/5/show/"); //update the class}

并在更改选择器上更改为以下代码=>

var classUpdateI; //stands for our interval updating class$(".class-selector").on("change",function(){    if (classUpdateI!=null)clearInterval(classUpdateI); //If the selector changed clear the interval so the container won't be update on it's own    if(this.value == "")        return; // if the value is null don't do anything    else if(this.value == "allclassnup"){        refreshClass(); //if the value is allclassnup which is stands for All Non-Updating just refresh the whole class     }    else if(this.value == "allclassup"){        refreshClass(); //if the value is allclassup which is stands for All Updating refresh the whole class and set an interval for thirty second (look for 30*1000)        classUpdateI = setInterval(refreshClass,30*1000);    }    else //else then it's a simple class value, just simply update the current class        updateClass(this.value);})

希望能对您有所帮助；）
编辑 ：编辑后可以获取大表（而不生成表！），所有更新将在30秒的间隔内更新。另一个
编辑 ：信不信由你，我已经解决了您所有的问题！
工作区：http :
//jsfiddle.net/sijav/kHtuQ/39/或http://fiddle.jshell.net/sijav/kHtuQ/39/show/
1，这是因为它仅适用于最后一个html，对于新的，我们应该再做一次！因此将整个

$('tr').click()

函数放入另一个函数中，并在必要时调用它。
-您想让它充分发挥作用吗？这有点复杂，但是可以在代码中进行一些更改！那我要告诉你，好吧，这里是我们应该把阶级选择更改cookie的当前类的algurithm然后每当我们刷新，我们可以阅读或重新加载页面，并把必要的选定类等等......
但在这里进行代码设计时，我确实使其工作了，
首先我创建了一个全局变量

FirstTimeInit =true;

，以确保我们是否第一次加载页面，其次我将for循环放在页面加载时突出显示。一个叫做的函数

selectSelectedClass

，为什么呢？因为我们需要多次调用它，因此第三次添加了一些if语句，以确保我们可以读取cookie，然后更改突出显示的内容和当前类，这是代码：

if(readcookie("CurrentClass")) //if we can read coockie    $(".class-selector").val(readcookie("CurrentClass")).change(); //change it's value to current cookie and trigger the change functionelse{ // else    selectSelectedClass(); //select those which was highlighted before    trClick(); //make things clickable    FirstTimeInit = false; //and turn of the first time init}

在选择器值更改上添加一个创建cookie更改=>

createcookie("CurrentClass",$(".class-selector").val(),1);

，最后更改将Ajax成功获取到此的成功

        success: function(html){ $("#container").html(html + '<a id="KEY"></a>'); //the html container changer with adding extra id , I'll explain it later it's for your second question if(FirstTimeInit){ //if it is First Time then     selectSelectedClass(); //highlight which was highlighted after put the correct html     FirstTimeInit = false; // turn of the first time init } else //else     for (var i=0;i<($("table").children().length);i++){         if(readcookie(i))  erasecookie(i); //erase every cookie that has been before because the table is now changed and we're going on another table so old cookie won't matter     } trClick(); //make things selectable!        }

为了使它没有错误，我还更改了refreshClass，以便在所选类为all或为null时将firstinit设置为firstinit，因为那样我们就拥有所有类，并且需要那些cookie！所以这是代码：

function refreshClass(){    if(readcookie("CurrentClass")=="allclassnup"||readcookie("CurrentClass")=="allclassup"||readcookie("CurrentClass")==null)        FirstTimeInit = true;    updateClass("http://fiddle.jshell.net/sijav/mQB5E/5/show/");}

2

<a id="TOP"></a>

必须在容器之前，

<aid="KEY"></a>

必须在将html放在容器上之后在容器的末尾生成。所以

$("#container").html(html + '<aid="KEY"></a>');

3下一个和上一个按钮是为非ajax先前设计而设计的，现在需要其他解决方案！例如看这些简单的代码

$("#PreviousClass").click(function(){//on prev click    $(".class-selector").val($(".class-selector option:selected").prev().val()).change() //change the value to the prev on and trigger the change});$("#NextClass").click(function () {//on next click    $(".class-selector").val($(".class-selector option:selected").next().val()).change() //change the value to the prev on and trigger the change});

4是可能您应该将密码更改为以下密码，然后再进行=>

currentClass=0;$("a.TOPJS").click(function () {    if(currentClass>0){        currentClass--        scrollToAnchor('CLASS'+currentClass);    }});$("a.KEYJS").click(function () {    if($("a[id='CLASS" + currentClass + "']")[0]!=undefined){        currentClass++        scrollToAnchor('CLASS'+currentClass);    }    else        scrollToAnchor('CLASSMAX');});

上帝的运气

另一个请求编辑：（ 希望这将是最后一个！）
工作小提琴 ：http :
//jsfiddle.net/sijav/kHtuQ/42/或http://fiddle.jshell.net/sijav/kHtuQ/42/show/
好吧因为您不喜欢将刷新类更改为其中的更新类，所以我删除了该类，更好的是，我添加了一些代码在cookie中添加类，因为cookie不是树，因此存在某种条件，该类是从类选择器的最后一个字符读取的，因此请确保在最后一个字符处有类号，例如->

Class number ***5***

将为类选择器读取数字5！
编辑 ：优化类的下一个和上一个，请参见http://jsfiddle.net/sijav/kHtuQ/46/

编辑 ：根据要求的注释，
这就是我要告诉您的内容，有时该演示在jsfiddle.net上显示，有时在fiddle.jshell.net上显示，这些是不同的域，并且您无法从不同的域获取html。
1）您只能将函数放入Interval或仅创建另一个函数并按如下方式正确调用它=>

classUpdateI = setInterval(function(){updateClass(this.value,parseInt(a.charAt(a.length-1),10));},30*1000);

2）失踪？！我找不到您的第二个问题！
3）好吧，… trclick需要将…更改为=>

function trClick(tIndex){ //tIndex would be classnumber from now on    if (tIndex == -1){ //if it is all updating or all non updating        $("tr").click(function(){ //do the previous do $(this).toggleClass('selected').siblings().removeClass('selected'); if(readcookie($(this).parent().index("tbody"))){     if(readcookie($(this).parent().index("tbody"))==$(this).index())         erasecookie($(this).parent().index("tbody"));     else{         erasecookie($(this).parent().index("tbody"));         createcookie($(this).parent().index("tbody"),$(this).index(),1);     } } else     createcookie($(this).parent().index("tbody"),$(this).index(),1);        });    }    else{ //else        $("tr").click(function(){ //on click $(this).toggleClass('selected').siblings().removeClass('selected');//do the toggle like before if(readcookie(tIndex)){ //if you can read the CLASS cookie, not the current index of table because our table has only one row     if(readcookie(tIndex)==$(this).index()) //as before if we selecting it again         erasecookie(tIndex); //just erase the cookie     else{ //else         erasecookie(tIndex); //select the new one         createcookie(tIndex,$(this).index(),1);     } } else     createcookie(tIndex,$(this).index(),1); //else if we can't read it, just make it!        });    }}

当我们成功调用Ajax时，应使用classNumber =>

trClick(classNumber);

上次工作的提琴进行 调用 ： http
:
//jsfiddle.net/sijav/kHtuQ/53/或http://fiddle.jshell.net/sijav/kHtuQ/53
/表演/

祝好运