jQuery高亮显示新行上的效果

Question

I have an AJAX grid which refreshes every 60 seconds showing new rows. It's a very basic XMLHttpRequest() grid which pulls data from a php file. I've checked all the internet but still haven't found a solution to how to implement this jQuery highlight effect on newly added rows after each refreshing: http://docs.jquery.com/UI/Effects/Highlight :

What would be the best strategy?

Answer 1

Output new rows from your server with an extra class, say tohighlight . In your ajax success handler (in the JS), do something like:

...
success: function(data) {

  // ... your code to refresh the grid with new rows etc..

  // highlight new rows
  $('.tohighlight').highlight();

  // remove the tohighlight class, so these rows wont be highlighted after your next refresh
  $('.tohighlight').removeClass('tohighlight');

}
...

Answer 2

当您将数据包含在php文件中时，创建一个函数（仍在php文件中）即可将效果应用于数据，因此，当您从主页上将其拉出时，它已经具有效果。