2009-11-28 75 views
0

我想知道是否有人可以指向我的示例或示例代码的方向有关表操作我试图实现但尚未能够破解的一些事情。JQuery和实时表更新

我目前有一个正在生成的数据表,使用Tablesorter插件为Jquery排序和显示。

我想补充的功能

  1. Update自动表与任何新的数据每隔几秒钟,这些额外的位(而无需刷新页面),并维持整理。我可以创建PHP脚本来为新数据输出json,但不知怎的,我需要发送最后一行显示的ID(以便我可以找出要显示的新行)
  2. 一旦添加了新行(理想情况下平滑过渡像淡出)它将有一个css类的“新”或东西,会给它一个新的颜色
  3. 新的颜色然后会淡出到正常的表格样式(删除类)在15秒如果页面没有焦点并且有新数据(例如,在后台刷新,但用户正在查看另一个窗口/标签页),则等待用户聚焦在窗口/标签页上,然后携带如3中所述,将淡入淡出为正常颜色。

我希望这已经很清楚了,对于最重要的一点我有点怀疑是关注焦点问题的第4点,但我认为Facebook似乎是用他们的Live新闻Feed来做到这一点。它似乎并没有更新,直到我有窗口焦点(或所以我认为)

任何帮助和指导将不胜感激!

我的表是这样的形式:

<table class="tablesorter" cellspacing="1"> 
    <thead> 
    <tr> 
     <th>ID</th> 
     <th>lid</th> 
     <th>Time</th> 
     <th>Season</th> 
     <th>Keyword</th> 
     <th>Campaign</th> 
     <th>IP</th>   
    </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="id">6875</td> 
      <td class="lid">-----</td> 
      <td class="time">28 Nov 09 16:35:24</td> 
      <td class="season">xxx xxx</td> 
      <td class="keyword">xx xx xxxx</td> 
      <td class="campaign">xxx</td> 
      <td class="ip">xx.xx.xx.xx</td> 
     </tr> 
    <tbody> 
<table> 

回答

2

1:触发一个事件在JavaScript中每隔几秒钟,使用setTimeout()。使用:last过滤器可帮助您抓取最后一行。将ID存储在最后一行内的隐藏输入字段中。

2:上次我尝试过,淡入淡出和滚降在表格行上效果不佳。我必须创建非常难看的黑客才能使此功能起作用,例如每行创建一个全新的<table>。最近版本的jQuery中可能有所改进?查看Effects,查看可以为内容添加动画的方式列表。

3:您可以像使用淡入淡出和其他效果一样使用回调来实现此功能。

4:我没有检测窗口焦点的经验,虽然它似乎有资源可以帮助你做到这一点。这里有几个: http://www.webdeveloper.com/forum/archive/index.php/t-33457.html http://www.thefutureoftheweb.com/blog/detect-browser-window-focus

+0

您应该能够使用'$ .animate'方法来改变背景颜色或相关行,例如http://docs.jquery.com/Effects/animate – 2009-11-28 18:48:59