使用 Refresh 更新表答案

【问题标题】：Updating Table with Refresh使用 Refresh 更新表
【发布时间】：2014-03-19 14:07:25
【问题描述】：

我有一个由表格组成的 jquery 应用程序。该表有一个时间字段和一些数字字段。我想基本上每 3 秒增加一次值。所以我正在考虑创建一个函数，在其中增加数值并通过每 3 秒自动刷新一次的刷新函数调用它。

所以基本上原来的信息如下

科比 10:00 30 4 2

3秒后应该是

科比 10:03 31 5 4

这是我制作的Fiddle。

我无法做到这一点。我尝试创建一个函数，在其中增加表值并调用该函数

setInterval(updateFunction, 3000);

但没有运气。这就是我想创建一个函数的方式。

var cell = $("#example");
var currentVal = parseInt(cell.text(), 10);
cell.text( currentVal + 1 );

谁能给点建议。我是 js 和 jquery 的新手，如果英语很难理解，我也很抱歉我可以澄清我的意思。

【问题讨论】：

标签： javascript jquery html datatables

【解决方案1】：

这是一种方法。向需要更新的单元格添加类：

<td>Lebron James</td>
<td class="updateMeTime">08:00</td>
<td class="updateMeInt">27</td>
<td class="updateMeInt">11</td>
<td class="updateMeInt">10</td>

在这个例子中，updateMeInt 类表示它是一个简单的整数，updateMeTime 表示它是一个时间值。

然后您的更新函数将使用这些类遍历每个单元格并递增：

function UpdateFunction(){
    $(".updateMeInt").each(function(index){
       var cur = parseInt($(this).text(), 10);
       $(this).text(cur + 1);    
    });

    $(".updateMeTime").each(function(index){
        var cur = $(this).text().split(":");    
        var sec = parseInt(cur[1], 10);        
        var min = parseInt(cur[0], 10);

        sec = sec + 3;
        if (sec >= 60){
             sec = 0
             min = min + 1;
        }
        $(this).text(pad(min) + ":" + pad(sec)); 

    });
}

更新FIDDLE

【讨论】：

嗨，这工作正常，但我只注意到一件事，我在顶部有一个搜索栏，在我使用你的代码之前，我可以搜索整数和名称，但由于某种原因，这次刷新没有让我搜索任何 int 值，例如，如果 kobe bryant 有 30 分并且我在搜索中输入 30，它不会显示任何结果。是否可以在调用刷新功能时搜索它？
这与您使用的数据表插件有关。您应该查看它的 api，看看您应该如何更新单元格并保持其过滤工作。您可能应该针对该插件提出另一个问题，以便熟悉该插件的人可以帮助您...
是的，听起来不错。我认为过滤器只对我拥有的初始值起作用。我将看看 API。再次感谢。
嗨，我刚刚发布了一个新问题，您可以检查一下吗？ stackoverflow.com/questions/22644394/…

【解决方案2】：

在区间函数上试试这个代码：

$("#example > tbody tr").each(function(){
    var s = 0; //--- var for not increase 1st td ---
    $("td",this).each(function(){
        var data = $(this).html();
        if(/^[0-9]+\.?[0-9]*$/.test(data)){
          $(this).html(++data);   
        } else {
            if(s == 1) {
              date = new Date();
              var h = date.getHours();
              var m = date.getMinutes();
              if(m < 10) {m = '0'+m;} 
              $(this).html(h+':'+m); 
            };
            s = 1; //--- after 1st td increase ---

      }
   });
});

JSFiddle

【讨论】：