[JavaScript] feed reader

V|Ru$-X · 19. März 2013

feed reader

Hallo Leute,

ich bin gerade dabei einen eigenen Feed-Reader zu basteln. Im ersten Schritt lese ich RSS-Dateien aus und speichere einige Daten (Titel, Publikationsdatum, etc.) in einer MySQL-Datenbank ab. Das klappt schon alles so wie ich es mir vorstelle. Jetzt bastle ich gerade am Auslesen der Datenbank. Im Moment klappt bei einem Klick auf "drop" eine einzelne Zeile unterhalb aus und liefert eine kurze Beschreibung zum zugehörigen Feed. Das ganze läuft über PHP/Javascript.

Ich möchte jetzt dass bei einem Klick auf "Drop all" alle Zeilen auf- bzw. zuklappen. Habt ihren vielleicht einen eleganten Lösungsvorschlag?

Hier mal eine recht rudimentäre Vorschau.

HTML:

<script language="javascript" type="text/javascript">
function toggleRow(row_id){
 if (document.getElementById(row_id)) {
 if (document.getElementById(row_id).style.display == 'none') {
 document.getElementById(row_id).style.display = '';
 } else {
 document.getElementById(row_id).style.display = 'none';
 }
 }
}
</script>

<table border=1>
 <tr>
 <th>Drop all</th>
 <th>Topic</th>
 <th>Date</th> 
 </tr>
<?php
 $feeds_sql = "select * from feednews where DATE(PubDate) = DATE(NOW()) order by PubDate DESC";
 $feedlist = mysql_query($feeds_sql,$db); 
 $i=0;
 while ($row = mysql_fetch_object($feedlist)) {
 $i++;
 echo "<tr>
 <td><a href='javascript:toggleRow(".$i.")'>Drop</a></td>
 <td><a href='".$row->URL."' target='_blank'>". $row->Topic ."</a></td>
 <td>". $row->PubDate ."</td>
 </tr> 
 <tr>
 <td id=".$i." style='display:none' colspan=3>". $row->Description ."</td> 
 </tr>" ;
 } 
 echo"</table>";
 mysql_close($db);
?>

Anzeige

BlueSin · 20. März 2013

AW: feed reader

Hallo,
du hast ja schon die Methode 'toggleRow(int)'.

Nun kannts du eine Methode erstellen 'toggleRowAll(SummeDerEinträge)'.

Die Methode sehe dann vll. folgend aus.

Code:

function toggleRowAll(summe)
{
 for(var i=1; i<= summe; i++)
 {
 toggleRow(i);
 }
}

V|Ru$-X · 20. März 2013

AW: feed reader

Danke. Habe es jetzt mit jquery hingebogen:

HTML:

<table border=1>
 <tr>
 <th id="DropAll">Drop all</th>
 <th>Topic</th>
 <th>Date</th> 
 </tr>
 <tr class="TableRows">
 <td>Drop</td>
 <td><a href="'.$row->URL.'" target="_blank">'. $row->Topic .'</a></td>
 <td>'. $row->PubDate .'</td>
 </tr> 
 <tr class="descriptionRow" style="display:none">
 <td colspan=3>'. $row->Description .'</td> 
 </tr> 
</table> 

<script type="text/javascript">
$('.TableRows').click(function(){
 $(this).next('.descriptionRow').toggle();
});

$('#DropAll').click(function(){ 
 if ($('.descriptionRow:visible').length){
 $('.descriptionRow').hide();}
 else {$('.descriptionRow').show();
 } 
});
</script>

Nützliche Suchen

[JavaScript] feed reader

Videos zum Themenbereich