JQuery und Live-Tabelle Updates

Question

Ich habe mich gefragt, ob jemand mich in die Richtung von Beispielen oder Beispielcode für ein paar Dinge in Bezug auf Tabelle Manipulation zu erreichen Ich versuche haben zeigen können, aber nicht in der Lage gewesen, noch zu knacken.

Im Moment habe ich eine Tabelle von Daten erzeugt werden, dass sortiert und angezeigt wird unter Verwendung von Tablesorter Plugin für JQuery.

Ich möchte diese zusätzlichen Bits von Funktionen hinzuzufügen

1. Aktualisieren Sie die Tabelle automatisch alle paar Sekunden mit neuen Daten (ohne die Seite zu aktualisieren) und pflegen zu sortieren. Ich kann das PHP-Skript Ausgabe json für neue Daten erstellen, aber irgendwie würde ich brauche es die ID der letzten Zeile senden angezeigt (so dass ich herausfinden können, was neue Zeilen angezeigt werden)
2. Sobald eine neue Zeile hinzugefügt (idealerweise mit einem glatten Übergang wie fade) es würde eine CSS-Klasse der „neue“ hat oder etwas, das ihm eine neue Farbe geben
3. Die neue Farbe wird dann verblasst in den normalen Tabellenstil (entfernen Klasse) innerhalb von 15 Sekunden von der Seite Aufrechterhaltung Fokus
4. , wenn die Seite nicht den Fokus und neue Daten hat ist es (dh im Hintergrund erfrischend, aber Benutzer an einem anderen Fenster / Tab sucht) wartet, bis der Benutzer auf dem Fenster / Tab Fokus hat und dann die Fade führt zu eine normale Farbe wie in 3 beschrieben.

Ich hoffe, dies klar ist, ich das Teil ein wenig skeptisch bin über die meisten ist Punkt 4 mit der Fokus Frage, aber ich denke, Facebook zu tun scheint, dass mit ihrem Live-News-Feed. Es scheint nicht zu aktualisieren, bis ich das Fenster im Fokus (oder so annehmen i)

Jede Hilfe und Beratung wäre sehr dankbar!

Meine Tabelle ist in dieser Form:

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

Answer 1

1: ein Ereignis auszulösen alle paar Sekunden in JavaScript verwenden setTimeout() . Verwenden Sie die :last Filter Sie, dass letzte Reihe greifen zu helfen. Speichern Sie die ID in einem verborgenen Eingabefeld innerhalb der letzten Zeile.

2: Zuletzt habe ich versucht, Überblendungen und Roll-downs nicht gut auf Tabellenzeilen nicht funktioniert. Ich habe wirklich hässliche Hacks zu schaffen habe diese Funktionalität zu erhalten zu arbeiten wie eine ganz neue <table> pro Reihe zu schaffen. Vielleicht haben sich die Dinge in den letzten Versionen von jQuery verbessert? Schauen Sie sich Effects für eine Liste von Möglichkeiten, wie Sie Ihre Inhalte animieren können.

. 3: Sie können dies mit Rückrufen implementieren wie bei Blendungen und Roll-downs und anderen Effekten

4: Ich habe keine Erfahrung mit Fokusfenstern zu erfassen, wenn es wie es scheint Ressourcen gibt, die können Ihnen dabei helfen. Hier sind ein paar: http://www.webdeveloper.com/forum/archive/ index.php / t-33457.html http://www.thefutureoftheweb.com/blog/detect-browser-window- Fokus