PHP関数 備忘録：トーナメント表を作る：DW230

トーナメント表を作る

対戦者∨∨∨∨（開いて名前を変更できます）

1回戦	AA-AA	vs	BB-BB
2回戦	CC-CC	vs	DD-DD
3回戦	EE-EE	vs	FF-FF
4回戦	GG-GG	vs	HH-HH
5回戦		vs
6回戦		vs
決勝戦		vs

クリアして最初から

---

優勝

AA-AA

BB-BB

CC-CC

DD-DD

EE-EE

FF-FF

GG-GG

HH-HH

---

---

上記のようなテーブルのイメージで
線の部分のセルに番号を付けていきます



初期でテーブルを
table border="0" cellpadding="0" cellspacing="0"
としてテーブルとしての線を消します
上記のイメージの数字の部分にだけCSS用にidを振ります
tdが空だと表示がおかしくなるので「 」半角スペースを入れています

<table border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="6">優勝</td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> </tr> <tr> <td> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2" id="b101"> </td> <td colspan="2" id="b102"> </td> <td colspan="2" id="b103"> </td> <td colspan="2" id="b104"> </td> <td colspan="2" id="b105"> </td> <td colspan="2" id="b106"> </td> <td colspan="2" id="b107"> </td> <td colspan="2" id="b108"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2" id="b109"> </td> <td colspan="2" id="b110"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2" id="b111"> </td> <td colspan="2" id="b112"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="2"> </td> <td colspan="2" id="b113"> </td> <td colspan="2" id="b114"> </td> <td colspan="2" id="b115"> </td> <td colspan="2" id="b116"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2" id="b117"> </td> <td colspan="2" id="b118"> </td> <td colspan="2" id="b119"> </td> <td colspan="2" id="b120"> </td> <td colspan="2"> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="2" id="b121"> </td> <td colspan="2" id="b122"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2" id="b123"> </td> <td colspan="2" id="b124"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2" id="b125"> </td> <td colspan="2" id="b126"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2" id="b127"> </td> <td colspan="2" id="b128"> </td> <td> </td> </tr> <tr> <td colspan="2">AA-AA</td> <td colspan="2"> </td> <td colspan="2">BB-BB</td> <td colspan="2"> </td> <td colspan="2">CC-CC</td> <td colspan="2"> </td> <td colspan="2">DD-DD</td> <td colspan="2"> </td> <td colspan="2">EE-EE</td> <td colspan="2"> </td> <td colspan="2">FF-FF</td> <td colspan="2"> </td> <td colspan="2">GG-GG</td> <td colspan="2"> </td> <td colspan="2">HH-HH</td> </tr> </table>

テーブルの1行目と6行目は対戦者の名前が入ります
線を表示するtdは28個通し番号を付けます（b101～b128）
テーブルの線を表示する方法は
例
#b104{border:1px solid #ffffff;border-right-color:#666666;border-bottom-color:#666666;}
#b104 → tdのid（id="b104"）
border:1px solid #ffffff → 枠の太さ、実線、白
border-top-color:#666666; → 枠の上の線
border-bottom-color:#666666; → 枠の下の線
border-right-color:#666666; → 枠の右線
border-left-color:#666666; → 枠の左線
先に枠の太さ、実線（線のタイプ）、白（背景色）を指定
上の線や下の線だけだと表示されません

（b101～b128）のスタイルが下記になります <style> table{padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;} td{width:35px;height:35px;text-align:center;} #b101{border:1px solid #ffffff;border-bottom-color:#666666;} #b102{border:1px solid #ffffff;border-bottom-color:#666666;} #b103{border:1px solid #ffffff;border-bottom-color:#666666;} #b104{border:1px solid #ffffff;border-right-color:#666666;border-bottom-color:#666666;} #b105{border:1px solid #ffffff;border-bottom-color:#666666;border-left-color:#666666;} #b106{border:1px solid #ffffff;border-bottom-color:#666666;} #b107{border:1px solid #ffffff;border-bottom-color:#666666;} #b108{border:1px solid #ffffff;border-bottom-color:#666666;} #b109{border:1px solid #ffffff;border-right-color:#666666;} #b110{border:1px solid #ffffff;} #b111{border:1px solid #ffffff;} #b112{border:1px solid #ffffff;border-left-color:#666666;} #b113{border:1px solid #ffffff;border-top-color:#666666;border-left-color:#666666;} #b114{border:1px solid #ffffff;border-top-color:#666666;} #b115{border:1px solid #ffffff;border-top-color:#666666;} #b116{border:1px solid #ffffff;border-top-color:#666666;border-right-color:#666666;} #b117{border:1px solid #ffffff;border-top-color:#666666;border-left-color:#666666;} #b118{border:1px solid #ffffff;border-top-color:#666666;} #b119{border:1px solid #ffffff;border-top-color:#666666;} #b120{border:1px solid #ffffff;border-top-color:#666666;border-right-color:#666666;} #b121{border:1px solid #ffffff;border-top-color:#666666;border-left-color:#666666;} #b122{border:1px solid #ffffff;border-top-color:#666666;border-right-color:#666666;} #b123{border:1px solid #ffffff;border-top-color:#666666;border-left-color:#666666;} #b124{border:1px solid #ffffff;border-top-color:#666666;border-right-color:#666666;} #b125{border:1px solid #ffffff;border-top-color:#666666;border-left-color:#666666;} #b126{border:1px solid #ffffff;border-top-color:#666666;border-right-color:#666666;} #b127{border:1px solid #ffffff;border-top-color:#666666;border-left-color:#666666;} #b128{border:1px solid #ffffff;border-top-color:#666666;border-right-color:#666666;} </style>

初期で太さが「border:1px」色が「color:#666666;」になっていますので
勝ち上がって塗り替えたい線の部分を
太さを「border:2px」にして色が「color:#ff0000;」赤にします
※色の設定はRGBと「ff0000」を2桁ずつ16進数で表示しています
　「ff0000」→R（赤）「00ff00」→G（緑）「0000ff」→B（青）
　すべて「ffffff」は白になり「000000」は黒になります

---

---

ここからは実際にこのページで使ってるソースです
PHP関数（開始タグなど）を表示するため
テキストボックス内のPHPは無効化しています。このページでは実行されません
備忘録として残しているもので設置は自己責任でお願いいたします

PHP関数設定（変数の初期設定があるのでなるべく上の方に設定）
<?php $btma = "AA-AA"; $btmb = "BB-BB"; $btmc = "CC-CC"; $btmd = "DD-DD"; $btme = "EE-EE"; $btmf = "FF-FF"; $btmg = "GG-GG"; $btmh = "HH-HH"; $winer = "優勝"; if(isset($_POST['btma'])){$btma = $_POST['btma'];} if(isset($_POST['btmb'])){$btmb = $_POST['btmb'];} if(isset($_POST['btmc'])){$btmc = $_POST['btmc'];} if(isset($_POST['btmd'])){$btmd = $_POST['btmd'];} if(isset($_POST['btme'])){$btme = $_POST['btme'];} if(isset($_POST['btmf'])){$btmf = $_POST['btmf'];} if(isset($_POST['btmg'])){$btmg = $_POST['btmg'];} if(isset($_POST['btmh'])){$btmh = $_POST['btmh'];} $checka = ""; $checkb = ""; $checkc = ""; $checkd = ""; $checke = ""; $checkf = ""; $checkg = ""; $checkh = ""; $btm1 = ""; $btm2 = ""; $btm3 = ""; $btm4 = ""; $btm5 = ""; $btm6 = ""; $btm7 = ""; if($_POST['bt1'] == "a"){$win1 = "#b121{border:2px solid #ffffff;border-top-color:#ff0000;border-left-color:#ff0000;}\n";$checka = "checked";$btm1 = $btma;} if($_POST['bt1'] == "b"){$win1 = "#b122{border:2px solid #ffffff;border-top-color:#ff0000;border-right-color:#ff0000;}\n";$checkb = "checked";$btm1 = $btmb;} if($_POST['bt2'] == "c"){$win2 = "#b123{border:2px solid #ffffff;border-top-color:#ff0000;border-left-color:#ff0000;}\n";$checkc = "checked";$btm2 = $btmc;} if($_POST['bt2'] == "d"){$win2 = "#b124{border:2px solid #ffffff;border-top-color:#ff0000;border-right-color:#ff0000;}\n";$checkd = "checked";$btm2 = $btmd;} if($_POST['bt3'] == "e"){$win3 = "#b125{border:2px solid #ffffff;border-top-color:#ff0000;border-left-color:#ff0000;}\n";$checke = "checked";$btm3 = $btme;} if($_POST['bt3'] == "f"){$win3 = "#b126{border:2px solid #ffffff;border-top-color:#ff0000;border-right-color:#ff0000;}\n";$checkf = "checked";$btm3 = $btmf;} if($_POST['bt4'] == "g"){$win4 = "#b127{border:2px solid #ffffff;border-top-color:#ff0000;border-left-color:#ff0000;}\n";$checkg = "checked";$btm4 = $btmg;} if($_POST['bt4'] == "h"){$win4 = "#b128{border:2px solid #ffffff;border-top-color:#ff0000;border-right-color:#ff0000;}\n";$checkh = "checked";$btm4 = $btmh;} if($_POST['bt5'] == "i"){$win5 = "#b113{border:2px solid #ffffff;border-top-color:#ff0000;border-left-color:#ff0000;}\n#b114{border:2px solid #ffffff;border-top-color:#ff0000;}";$checki = "checked";$btm5 = $btm1;} if($_POST['bt5'] == "j"){$win5 = "#b115{border:2px solid #ffffff;border-top-color:#ff0000;}\n#b116{border:2px solid #ffffff;border-top-color:#ff0000;border-right-color:#ff0000;}";$checkj = "checked";$btm5 = $btm2;} if($_POST['bt6'] == "k"){$win6 = "#b117{border:2px solid #ffffff;border-top-color:#ff0000;border-left-color:#ff0000;}\n#b118{border:2px solid #ffffff;border-top-color:#ff0000;}";$checkk = "checked";$btm6 = $btm3;} if($_POST['bt6'] == "l"){$win6 = "#b119{border:2px solid #ffffff;border-top-color:#ff0000;}\n#b120{border:2px solid #ffffff;border-top-color:#ff0000;border-right-color:#ff0000;}";$checkl = "checked";$btm6 = $btm4;} if($_POST['bt7'] == "m"){$win7 = "#b101{border:2px solid #ffffff;border-bottom-color:#ff0000;}\n#b102{border:2px solid #ffffff;border-bottom-color:#ff0000;}\n#b103{border:2px solid #ffffff;border-bottom-color:#ff0000;}\n#b104{border:2px solid #ffffff;border-bottom-color:#ff0000;border-right-color:#ff0000;}\n#b109{border:2px solid #ffffff;border-right-color:#ff0000;}\n";$checkm = "checked";$btm7 = $btm5;$winer = "優勝：" . $btm5;} if($_POST['bt7'] == "n"){$win7 = "#b105{border:2px solid #ffffff;border-bottom-color:#ff0000;border-left-color:#ff0000;}\n#b106{border:2px solid #ffffff;border-bottom-color:#ff0000;}\n#b107{border:2px solid #ffffff;border-bottom-color:#ff0000;}\n#b108{border:2px solid #ffffff;border-bottom-color:#ff0000;}\n#b112{border:2px solid #ffffff;border-left-color:#ff0000;}\n";$checkn = "checked";$btm7 = $btm6;$winer = "優勝：" . $btm6;} ?>

スタイルシート（PHP変数を含むためPHPより下に設定）
<style> table{padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;} td{width:35px;height:35px;text-align:center;} #b101{border:1px solid #ffffff;border-bottom-color:#666666;} #b102{border:1px solid #ffffff;border-bottom-color:#666666;} #b103{border:1px solid #ffffff;border-bottom-color:#666666;} #b104{border:1px solid #ffffff;border-right-color:#666666;border-bottom-color:#666666;} #b105{border:1px solid #ffffff;border-bottom-color:#666666;border-left-color:#666666;} #b106{border:1px solid #ffffff;border-bottom-color:#666666;} #b107{border:1px solid #ffffff;border-bottom-color:#666666;} #b108{border:1px solid #ffffff;border-bottom-color:#666666;} #b109{border:1px solid #ffffff;border-right-color:#666666;} #b110{border:1px solid #ffffff;} #b111{border:1px solid #ffffff;} #b112{border:1px solid #ffffff;border-left-color:#666666;} #b113{border:1px solid #ffffff;border-top-color:#666666;border-left-color:#666666;} #b114{border:1px solid #ffffff;border-top-color:#666666;} #b115{border:1px solid #ffffff;border-top-color:#666666;} #b116{border:1px solid #ffffff;border-top-color:#666666;border-right-color:#666666;} #b117{border:1px solid #ffffff;border-top-color:#666666;border-left-color:#666666;} #b118{border:1px solid #ffffff;border-top-color:#666666;} #b119{border:1px solid #ffffff;border-top-color:#666666;} #b120{border:1px solid #ffffff;border-top-color:#666666;border-right-color:#666666;} #b121{border:1px solid #ffffff;border-top-color:#666666;border-left-color:#666666;} #b122{border:1px solid #ffffff;border-top-color:#666666;border-right-color:#666666;} #b123{border:1px solid #ffffff;border-top-color:#666666;border-left-color:#666666;} #b124{border:1px solid #ffffff;border-top-color:#666666;border-right-color:#666666;} #b125{border:1px solid #ffffff;border-top-color:#666666;border-left-color:#666666;} #b126{border:1px solid #ffffff;border-top-color:#666666;border-right-color:#666666;} #b127{border:1px solid #ffffff;border-top-color:#666666;border-left-color:#666666;} #b128{border:1px solid #ffffff;border-top-color:#666666;border-right-color:#666666;} <?php echo $win1; ?> <?php echo $win2; ?> <?php echo $win3; ?> <?php echo $win4; ?> <?php echo $win5; ?> <?php echo $win6; ?> <?php echo $win7; ?> </style>

HTMLは下記の3つ、順番を変えると動作しません
HTML（対戦者設定：PHPとスタイルより下に設定、1行目にformを設定）
<form method='post' action='index.php' id="tournament"> <input type="text" name="btma" value="<?php echo $btma; ?> " style='width:300px;padding: 0px 0px 0px 0px;'><br /> <input type="text" name="btmb" value="<?php echo $btmb; ?> " style='width:300px;padding: 0px 0px 0px 0px;'><br /> <input type="text" name="btmc" value="<?php echo $btmc; ?> " style='width:300px;padding: 0px 0px 0px 0px;'><br /> <input type="text" name="btmd" value="<?php echo $btmd; ?> " style='width:300px;padding: 0px 0px 0px 0px;'><br /> <input type="text" name="btme" value="<?php echo $btme; ?> " style='width:300px;padding: 0px 0px 0px 0px;'><br /> <input type="text" name="btmf" value="<?php echo $btmf; ?> " style='width:300px;padding: 0px 0px 0px 0px;'><br /> <input type="text" name="btmg" value="<?php echo $btmg; ?> " style='width:300px;padding: 0px 0px 0px 0px;'><br /> <input type="text" name="btmh" value="<?php echo $btmh; ?> " style='width:300px;padding: 0px 0px 0px 0px;'><br />

HTML（対戦表：対戦者設定より下に設定、最後にformの終わりを設定）
<table border="0" cellpadding="0" cellspacing="0"> <tr><td style="width:50px;">1回戦  </td><td style="width:250px;text-align:right;" nowrap><?php echo $btma; ?>  <input type=radio value="a" name="bt1" <?php echo $checka ?> ></td><td> vs </td><td style="width:250px;text-align:left;" nowrap><input type=radio value="b" name="bt1" <?php echo $checkb ?> > <?php echo $btmb; ?> </td></tr> <tr><td style="width:50px;">2回戦  </td><td style="width:250px;text-align:right;" nowrap><?php echo $btmc; ?>  <input type=radio value="c" name="bt2" <?php echo $checkc ?> ></td><td> vs </td><td style="width:250px;text-align:left;" nowrap><input type=radio value="d" name="bt2" <?php echo $checkd ?> > <?php echo $btmd; ?> </td></tr> <tr><td style="width:50px;">3回戦  </td><td style="width:250px;text-align:right;" nowrap><?php echo $btme; ?>  <input type=radio value="e" name="bt3" <?php echo $checke ?> ></td><td> vs </td><td style="width:250px;text-align:left;" nowrap><input type=radio value="f" name="bt3" <?php echo $checkf ?> > <?php echo $btmf; ?> </td></tr> <tr><td style="width:50px;">4回戦  </td><td style="width:250px;text-align:right;" nowrap><?php echo $btmg; ?>  <input type=radio value="g" name="bt4" <?php echo $checkg ?> ></td><td> vs </td><td style="width:250px;text-align:left;" nowrap><input type=radio value="h" name="bt4" <?php echo $checkh ?> > <?php echo $btmh; ?> </td></tr> <tr><td style="width:50px;">5回戦  </td><td style="width:250px;text-align:right;" nowrap><?php echo $btm1; ?>  <input type=radio value="i" name="bt5" <?php echo $checki ?> ></td><td> vs </td><td style="width:250px;text-align:left;" nowrap><input type=radio value="j" name="bt5" <?php echo $checkj ?> > <?php echo $btm2; ?> </td></tr> <tr><td style="width:50px;">6回戦  </td><td style="width:250px;text-align:right;" nowrap><?php echo $btm3; ?>  <input type=radio value="k" name="bt6" <?php echo $checkk ?> ></td><td> vs </td><td style="width:250px;text-align:left;" nowrap><input type=radio value="l" name="bt6" <?php echo $checkl ?> > <?php echo $btm4; ?> </td></tr> <tr><td style="width:50px;">決勝戦 </td><td style="width:250px;text-align:right;" nowrap><?php echo $btm5; ?>  <input type=radio value="m" name="bt7" <?php echo $checkm ?> ></td><td> vs </td><td style="width:250px;text-align:left;" nowrap><input type=radio value="n" name="bt7" <?php echo $checkn ?> > <?php echo $btm6; ?> </td></tr> <tr><td style="width:50px;">　</td><td style="width:250px;text-align:left;" nowrap>　</td><td><input type=submit value="更新" name="bt0"></td><td style="width:250px;text-align:left;" nowrap>　</td></tr> </table> </form>

HTML（トーナメント表：対戦者、対戦表設定より下に設定）
<table border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="6"><?php echo $winer; ?> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> </tr> <tr> <td> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2" id="b101"> </td> <td colspan="2" id="b102"> </td> <td colspan="2" id="b103"> </td> <td colspan="2" id="b104"> </td> <td colspan="2" id="b105"> </td> <td colspan="2" id="b106"> </td> <td colspan="2" id="b107"> </td> <td colspan="2" id="b108"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2" id="b109"> </td> <td colspan="2" id="b110"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2" id="b111"> </td> <td colspan="2" id="b112"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="2"> </td> <td colspan="2" id="b113"> </td> <td colspan="2" id="b114"> </td> <td colspan="2" id="b115"> </td> <td colspan="2" id="b116"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2" id="b117"> </td> <td colspan="2" id="b118"> </td> <td colspan="2" id="b119"> </td> <td colspan="2" id="b120"> </td> <td colspan="2"> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="2" id="b121"> </td> <td colspan="2" id="b122"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2" id="b123"> </td> <td colspan="2" id="b124"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2" id="b125"> </td> <td colspan="2" id="b126"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2" id="b127"> </td> <td colspan="2" id="b128"> </td> <td> </td> </tr> <tr> <td colspan="2"><?php echo $btma; ?> </td> <td colspan="2"> </td> <td colspan="2"><?php echo $btmb; ?> </td> <td colspan="2"> </td> <td colspan="2"><?php echo $btmc; ?> </td> <td colspan="2"> </td> <td colspan="2"><?php echo $btmd; ?> </td> <td colspan="2"> </td> <td colspan="2"><?php echo $btme; ?> </td> <td colspan="2"> </td> <td colspan="2"><?php echo $btmf; ?> </td> <td colspan="2"> </td> <td colspan="2"><?php echo $btmg; ?> </td> <td colspan="2"> </td> <td colspan="2"><?php echo $btmh; ?> </td> </tr> </table>