PHPの変数を使用してHTMLのtableの背景色を交互にしたい。

テーブルの背景色を交互にする為にclass属性の最後に０か1をつけて背景色をコントロールしたいのですがうまくいきません。

ソースコードは下記になります。

<?php
    $i = 1;
?>

<table>

<tr>
    <th>項目1</th>
    <th>項目2</th>
    <th>項目3</th>
    <th>項目4</th>
</tr>

<tr>
    <td class="sample_<?php echo ($i+1)%2; ?>">内容</td>
    <td class="sample_<?php echo $i; ?>">内容</td>
    <td class="sample_<?php echo $i; ?>">内容</td>
    <td class="sample_<?php echo $i; ?>">内容</td>
</tr>
<tr>
    <td class="sample_<?php echo ($i+1)%2; ?>">内容</td>
    <td class="sample_<?php echo $i; ?>">内容</td>
    <td class="sample_<?php echo $i; ?>">内容</td>
    <td class="sample_<?php echo $i; ?>">内容</td>
</tr>

</table>

css

.sample_0 { background:#fff;}
.sample_1 { background:#ccc;}

イメージとしては$iに1を代入し
まずは演算子を使った式で($1+1) % 2で0を作り
以下のtdに0になった$iをechoで表示し<td class="sample_0">内容</td>という形にしたいです。
次のtrの始めのtdには0になった$iを上の式と同じ方法で計算し1を作り1になった$iを下のtdにechoで表示し

<td class="sample_1">内容</td>としたいです。

どうすれば背景色を交互にできるのでしょうか。

どなたかご教授いただけましたら幸いです。
よろしくお願い

maisumakun

2018/07/13 08:34

「PHPで制御しないといけない」理由はありますでしょうか。

m.ts10806

2018/07/13 12:57

質問に対する回答ではないのでこちらに書きますが#fffだと単に白なのでわかりづらいと思います。想定通りできているかの確認の際はもう少し見た目に分かりやすい色を付けられた方が良いかと思います。「効いていないからできていないのか」「できているけど白にしているから分かりづらいのか」という余計な詮索が1つ入ります。問題の切り分けはなるべく1つでも少ない方が良いです。

spcl

2018/07/13 22:56

maisumakun様　他の回答でいただいておりますが、cssのみでできることを知らなかったためPHPで実装しようとしました。

spcl

2018/07/13 22:57

mts10806様　おっしゃる通りです！勉強になりました。この度もご丁寧にありがとうございます。

行動規範の内容に同意します

回答3件

PHPは不要で、CSSだけで実現可能です。

CSS
1tr:nth-child(even) td {
2  background:#fff;
3}
4
5tr:nth-child(odd) td {
6  background:#ccc;
7}

投稿2018/07/13 08:18

maisumakun

総合スコア145184

spcl

2018/07/13 23:10

maisumakun様ご解答ありがとうございます。 cssだけでできることを知らなかったのでこちらもありがたいご解答でした。ベストアンサーにしたいところですが、今回はPHPの仕組みも知ることができた別の方の回答をベストアンサーとしております。今後ともよろしくお願いいたします。

行動規範の内容に同意します

ベストアンサー

最初に変数iに1を入れてその後入れ直してないので
1つめと4つめのtdタグ以外のiはすべて1になってますですね。
質問者が思い描くコードそのものであれば

<?php
    $i = ($i+1)%2;
?>
<tr>
    <td class="sample_<?php echo $i; ?>">内容</td>
    <td class="sample_<?php echo $i; ?>">内容</td>
    <td class="sample_<?php echo $i; ?>">内容</td>
    <td class="sample_<?php echo $i; ?>">内容</td>
</tr>
<?php
    $i = ($i+1)%2;
?>
<tr>
    <td class="sample_<?php echo $i; ?>">内容</td>
    <td class="sample_<?php echo $i; ?>">内容</td>
    <td class="sample_<?php echo $i; ?>">内容</td>
    <td class="sample_<?php echo $i; ?>">内容</td>
</tr>

と記載するとこですかね。

真面目に書くならfor文で書くんですけど。

投稿2018/07/13 08:33

i_sugiyama_tomo

総合スコア85

PHPを使わずともこれだけでできます。

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<style type="text/css">
7			table {
8				border-collapse: collapse;
9			}
10			table th, table td {
11				border: 1px solid #CCC;
12			}
13			table.striped tbody tr:nth-child(odd) {
14				background-color: #EEE;
15			}
16		</style>
17	</head>
18	<body>
19		<div>
20			<table class="striped">
21				<thead>
22					<tr>
23						<th>1</th>
24						<th>2</th>
25						<th>3</th>
26					</tr>
27				</thead>
28				<tbody>
29					<tr>
30						<td>1</td>
31						<td>2</td>
32						<td>3</td>
33					</tr>
34					<tr>
35						<td>1</td>
36						<td>2</td>
37						<td>3</td>
38					</tr>
39					<tr>
40						<td>1</td>
41						<td>2</td>
42						<td>3</td>
43					</tr>
44					<tr>
45						<td>1</td>
46						<td>2</td>
47						<td>3</td>
48					</tr>
49					<tr>
50						<td>1</td>
51						<td>2</td>
52						<td>3</td>
53					</tr>
54				</tbody>
55			</table>
56		</div>
57	</body>
58</html>