如何在循環和表格中將CSS與PHP結合使用？

我想知道是否有可能以一種簡單的方式，當我使用while函數來調出一堆數據並將它們放入表格中，但我想使用CSS使其成爲一排具有常規背景和一排光背景。如何在循環和表格中將CSS與PHP結合使用？

希望我說的很有道理....

這是我有：

echo "<style type='text/css'>"; 
echo "th {background: #CEED5E;}"; 
echo "</style>"; 


echo "<table border=1>"; 
    echo "<tr><th>Product ID</th><th>Title</th><th>Author</th><th>Description</th></tr>"; 


while ($row = mysqli_fetch_assoc($result)) 
{ 
    echo "<tr><td>" . $row["id"] . "</td><td>" . $row["title"] . "</td><td>" . ucwords(strtolower($row["authorFirstName"] . " " . $row["authorLastName"])) . "</td><td>" . $row["description"] . "</td></tr>"; 

} 

echo "</table>";

來源

2013-03-26 Dora

你在這裏有什麼問題？這是否正常工作？ – 2013-03-26 11:37:52

我的壞主題應該是一個問題 – Dora 2013-03-26 11:41:42

echo "<style type='text/css'>"; 
echo ".normalbackground {background-color: white;}"; 
echo ".coloredbackground {background-color: #CEED5E;}"; 
echo "</style>"; 


echo "<table border=1>"; 
echo "<tr><th>Product ID</th><th>Title</th><th>Author</th><th>Description</th></tr>"; 

$i = 0; 
while ($row = mysqli_fetch_assoc($result)) 
{ 
$i++; if (($i % 2) == 0) {$class = "coloredbackground";} else {$class = "normalbackground";}; 
echo "<tr><td class="$class">" . $row["id"] . "</td><td class="$class">" . $row["title"] . "</td><td class="$class">" . ucwords(strtolower($row["authorFirstName"] . " " . $row["authorLastName"])) . "</td><td class="$class">" . $row["description"] . "</td></tr>"; 

} 

echo "</table>";

來源

2013-03-26 11:46:24

$i = 0; 
while ($row = mysqli_fetch_assoc($result)) 
{ 
    echo "<tr ".($i%2 == 1) ? 'style="background-color:red': ''."><td>" . $row["id"] . "</td><td>" . $row["title"] . "</td><td>" . ucwords(strtolower($row["authorFirstName"] . " " . $row["authorLastName"])) . "</td><td>" . $row["description"] . "</td></tr>"; 

$i++; 
}

來源

2013-03-26 11:44:47

你需要一個特定的類添加到每個奇數或偶數行，並申請你的CSS到那個類，看看下面的代碼片段。

echo "<style type='text/css'> 
      tr {background: #999999;} 
      tr.row_odd {background: #EFEFEF;} 
     </style> 
     <table border=1> 
      <tr> 
       <th>Product ID</th> 
       <th>Title</th> 
       <th>Author</th> 
       <th>Description</th> 
      </tr> 
      "; 

$count = 0; 
while ($row = mysqli_fetch_assoc($result)) { 
    echo "<tr".($count%2?'class="row_odd"':'')."> 
     <td>" . $row["id"] . "</td> 
     <td>" . $row["title"] . "</td> 
     <td>" . ucwords(strtolower($row["authorFirstName"] . " " . $row["authorLastName"])) . "</td> 
     <td>" . $row["description"] . "</td> 
    </tr>"; 

    $count++; 
} 

echo "</table>";

來源

2013-03-26 11:46:24 llanato

CSS可以做的交替顏色錶行很容易，沒有你需要做具體在PHP代碼中任何東西。

您可以使用:nth-child或:nth-of-type選擇器。

實施例：

.mytable tr:nth-child(even) {background: #CCC;} 
.mytable tr:nth-child(odd) {background: #FFF;}

參見文檔從W3C：http://www.w3.org/Style/Examples/007/evenodd.en.html

唯一需要注意的是，這是在不支持IE8或更早。但所有其他瀏覽器通常使用support it just fine，所以如果您可以在沒有IE6/7/8支持的情況下生活，那麼就做到這一點，您就會好起來的。

如果你需要支持IE8或更早的版本，那麼你有幾個選擇。

顯而易見的選擇只是讓它離開，並讓IE8顯示錶格行的單一顏色。它不會阻止人們使用該網站，因此只需將更好看的東西留給更好的瀏覽器即可。
但是有一些JavaScript黑客爲:nth-child選擇器添加了對老版本IE的支持。我推薦的最好的是http://selectivizr.com/。現在即使在較舊的IE版本中也可以使用高級CSS。
如果您不想這樣做，但您確實需要在IE中顯示行顏色，那麼您剩下的唯一選項就是將類添加到行中。只需爲奇數行和偶數行配置兩個類，並根據需要將這些類添加到每一行。這可以在頁面加載時在您的PHP代碼或您的JS代碼中完成。儘管這不是理想的解決方案; Selectivizr更好，因爲它意味着其他瀏覽器不會因爲舊的IE缺乏功能而受到影響。

希望有所幫助。

來源

2013-03-26 11:55:58 Spudley

如何在循環和表格中將CSS與PHP結合使用？

回答

相關問題