✔ CSV Daten in HTML-Tabelle einbinden?

F

Fonsi-Heizer

Mitglied
EDIT:

Mittels folgenden PHP-Skript binde ich die unten angehängte CSV Datei ein:

PHP: 
<?php

$row = 1;
if (($handle = fopen("companies.csv", "r")) !== FALSE) {
  
    while (($data = fgetcsv($handle, 1000, ";")) !== FALSE) {
        $num = count($data);
        if ($row == 1) {
            echo '<thead><tr>';
        }else{
            echo '<tr>';
        }
      
        for ($c=0; $c < $num; $c++) {
            //echo $data[$c] . "<br />\n";
            if(empty($data[$c])) {
               $value = "&nbsp;";
            }else{
               $value = $data[$c];
            }
            if ($row == 1) {
                echo '<th>'.$value.'</th>';
            }else{
                echo '<td>'.$value.'</td>';
            }
        }
      
        if ($row == 1) {
            echo '</tr></thead><tbody>';
        }else{
            echo '</tr>';
        }
        $row++;
    }
  
    echo '</tbody></table>';
    fclose($handle);
}
?>

Nun möchte ich aber jeden einzelnen <th> einzeln formatieren:

PHP: 
  if ($row == 1) {
                echo '<th>'.$value.'</th>';
            }else{
                echo '<td>'.$value.'</td>';
            }

Hier noch die HTML wie die Header korrekt zugewiesen sind lt. Footable:
HTML: 
<div class="demo-container">
    <div class="tab-content">
        <div class="tab-pane active">
            <h2>SALZBURG OPEN 2015 - LAST 32</h2>
            <table class="footable table intercept">
        <thead>
                <tr>
                    <th data-hide="" width=80px>
                        MATCH NR.
                    </th>
                    <th data-hide="phone" width=150px>
                        STATUS
                    </th>
                    <th data-hide="phone" width=250px>
                        PLAYER 1
                    </th>
                    <th data-hide="phone" width=200px>
                        PLAYER 2
                    </th>
                    <th data-hide="phone">
                        SCORE
                    </th>     
                   
                </tr>
                </thead>

Es wäre auch toll, wenn sich z.B. der STATUS sich ändert im CSV, dieses auch den CSS-Status ändern würde.

Bitte um Hilfe, irgendwie stehe ich gerade am Schlauch und komm nicht mehr weiter.

Danke!

LG
 

Anhänge

  • companies.zip
    529 Bytes · Aufrufe: 7
Zuletzt bearbeitet:
Du könntest den tr oder td tags eine Klasse zuweisen, die du dann in deinem Stylesheet formatierst.
PHP: 
for ($c=0; $c < $num; $c++) {
            //echo $data[$c] . "<br />\n";
            if(empty($data[$c])) {
               $value = "&nbsp;";
            }else{
               $value = $data[$c];
            }
            if ($row == 1) {
                echo '<th>'.$value.'</th>';
            }else{
               if($value=="Finished"){
                echo '<td class="Fin">'.$value.'</td>';
              }
              else {
                echo '<td class="Anders">'.$value.'</td>'; 
             }
            }
        }

Erweitert kannst du mit if($c==2) natürlich vorher prüfen ob du in der richtigen Spalte bist. Oder mit if($data[2]=="Finished") den Status abfragen, bevor du deine Zeile abhandelst und deine Css-Klasse für die Zeile setzen.
http://www.timrivera.com/tests/csstables.html
 
Zuletzt bearbeitet:
Hallo ikosaeder!

Danke für die Antwort.

Ich habe insgesamt 3 verschiedene Statusoptionen:

Waiting, Running, Finished!
CSS CLASS von Waiting: status-metro status-disabled
CSS CLASS von Running: status-metro status-running
CSS CLASS von Finished: status-metro status-active

Leider bekomme ich das hinzufügen von den regeln nicht ganz hin, bitte um Mithilfe.

Weiters wäre noch offen, wie ich den 5 verschiedenen Spalten auch noch extra klassen und width zuteilen könnte.

Vielen Dank im Voraus, bin nicht so begabt in PHP, sry!
 
ikosaeder hat gesagt.:
  • }else{
  • if($value=="Finished"){
  • echo '<td class="Fin">'.$value.'</td>';
  • }
  • else {
  • echo '<td class="Anders">'.$value.'</td>';
  • }
Zum Vergrößern anklicken....

Schau dir meinen Code Abschnitt nochmal genau an, da sollte klar werden, wie du den Tabellenelementen class-Definitionen zuweisen kannst. Width solltest du nicht direkt zuweisen sondern über die verschiedenen Klassen im css einstellen.
 
Hallo!

Leider bekomme ich das nicht zu funktionieren! - Bin leider Anfänger und habe eigtl. nur HTML Erfahrung!!

So sieht mein derzeitiger Code aus, leider löscht er mir nun alle Spalten, bis auf den STATUS (TEST-SEITE):

PHP: 
<?php
$row = 1;
if (($handle = fopen("companies.csv", "r")) !== FALSE) {
  while (($data = fgetcsv($handle, 1000, ";")) !== FALSE) {
  $num = count($data);
  if ($row == 1) {
  echo '<thead><tr>';
  }else{
  echo '<tr>';
  }
 
  for ($c=0; $c < $num; $c++) {
  //echo $data[$c] . "<br />\n";
  if(empty($data[$c])) {
  $value = "&nbsp;";
  }else{
  $value = $data[$c];
  }
  if ($row == 1) {
  echo '<th>'.$value.'</th>';
  }
  else{
  if($value=="Finished"){
  echo '<td class="status-metro status-finished">'.$value.'</td>';
  }
  else {
  if($value=="Waiting"){
  echo '<td class="status-metro status-waiting">'.$value.'</td>';
  }
  else {
  if($value=="Running"){
  echo '<td class="status-metro status-running">'.$value.'</td>';
  }
  }
  }
  }
  }
 
  if ($row == 1) {
  echo '</tr></thead><tbody>';
  }else{
  echo '</tr>';
  }
  $row++;
  }
  echo '</tbody></table>';
  fclose($handle);
}
?>

Danke!
 
Super Danke, das klappt soweit nun!

Jetzt hab ich nur das Problem das die Tabelle einen ungewohnten Abstand reinbringt zwischen den Spalten:

Fonsi-Heizer hat gesagt.:
STATUS (TEST-SEITE):
Zum Vergrößern anklicken....

Liegt das am CSS?

CSS: 
body{
    color:#2B2B2B;
    font-family: 'trebuchet MS' , 'Lucida sans' , Arial;
}

    body.dark {
        background: #444;
        color:#ffd;
    }
   
.demo-container {
    margin:10px;
}

code {
    background: #ddd;
    padding:2px 5px;
}

.status-metro {
    display: inline-block;
    padding: 2px 5px;
    color:#fff;
}

.status-metro.status-finished {
    background: #43c83c;
}

.status-metro.status-waiting {
    background: #999999;
}

.status-metro.status-running {
    background: #FFA500;
}

.foo-setup li {
    margin-bottom:30px;
}
 
Mir ist nicht ganz klar welchen Abstand du meinst, aber hier ein paar Hinweise:
Entferne alle margin und padding Einträge
Standardmässig ist tablewidth 100% das kannst du natürlich einstellen.
Du kannst auch einzelnen Spalten ein fixe Breite zuweisen.
 
Ich glaub, ich weiß nun woran es lag.

HTML: 
<td class="footable-visible" data-value="1">
<span class="status-metro status-active" title="Active">Finished</span>
</td>

Habe es nun selbst hinbekommen!!!

Danke für deine Ruhe und Hilfsbereitschaft!!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück