Tabellers placering i PHP/HTML
Dette spørgsmål er en fortsættelse fra tidligere.Jeg har en kode der skal placere nogle felter lavet som tabeller ved siden af hinanden. Koden virker når den afvikles således:
<table align=center>
<tr>
<td><?php opgavefelt(1); ?></td><td><?php svarfelt(); ?></td><td><?php opgavefelt(2); ?></td><td><?php opgavefelt(3); ?></td><td><?php opgavefelt(4); ?></td>
</tr>
</table>
Den skal dog afvikles dynamisk, hvor antallet af elementer i et array bestemmer om der er f.eks. tre eller fem felter. Min kode ser således ud, men den sætter felterne oven på hinanden, hvilket er mit store problem:
// opgavedata i array hentes via PHP
$opgave = array("Y2","G2","B2","svar","C2","k2","5"); //eksempel
$antalElementer = count($opgave);
$antalFelter = $antalElementer - 2;
$tid = $antalFelter + 1;
$rigtigtSvar = $opgave[0];
for ($i=1; $i<$antalFelter + 1; $i++) {
if ($opgave[$i] !== "svar") {
opgavefelt($i); // * Her skal felterne placere sig VED SIDEN af hinanden og ikke undedr hinanden *
} else {
svarfelt(); // * Her skal felterne placere sig VED SIDEN af hinanden og ikke undedr hinanden *
}
}
Hele koden til siden kommer herefter:
<html>
<head>
<title>Tegnesjov</title>
<script>
baggrund = "White";
aktuelle = "Black";
function SetBg(id,farve) {
bgcol = document.getElementById(id).style.backgroundColor;
if(bgcol!=baggrund){
document.getElementById(id).style.backgroundColor=baggrund;
}else{
document.getElementById(id).style.backgroundColor=aktuelle;
}
}
function SetBgPalette(id) {
bgcol = document.getElementById(id).style.backgroundColor;
aktuelle = bgcol;
document.getElementById('felt_5').style.backgroundColor=bgcol;
}
</script>
</head>
<body style="background-color: #558820;">
<H1><center>Tegn med farver i feltet</center></h1>
<?php
// opgavedata i array hentes via PHP
$opgave = array("Y2","G2","B2","svar","C2","k2","5"); //eksempel
$antalElementer = count($opgave);
$antalFelter = $antalElementer - 2;
$tid = $antalFelter + 1;
$rigtigtSvar = $opgave[0];
for ($i=1; $i<$antalFelter + 1; $i++) {
if ($opgave[$i] !== "svar") {
opgavefelt($i); // * Her skal felterne placere sig VED SIDEN af hinanden og ikke undedr hinanden *
} else {
svarfelt(); // * Her skal felterne placere sig VED SIDEN af hinanden og ikke undedr hinanden *
}
}
// Tegne svarfeltet
function svarfelt(){
$vandret = 7;
$lodret = 7;
echo '<table cellspacing="1" cellpadding="1" border="5" bordercolor="Black" align=center>';
for ($i=0; $i<$lodret; $i++) {
echo '<tr>';
for ($n=0; $n<$vandret; $n++) {
// dit felt
echo "<td id=\"svar_".$i."_".$n."\" onClick=\"SetBg(this.id);\" width=\"15\" height=\"15\" style=\"background-color: White;\"></td>";
}
}
echo '</table>';
}
// Tegne opgavefelter
function opgavefelt($nr){
$nummer = $nr;
$vandret = 7;
$lodret = 7;
echo '<table id="opgFelt_ .$nummer."\" cellspacing="1" cellpadding="1" border="3" align=center>';
for ($i=0; $i<$lodret; $i++) {
echo '<tr>';
for ($n=0; $n<$vandret; $n++) {
// dit felt
echo "<td id=\"felt_".$nummer."_".$i."_".$n."\" width=\"15\" height=\"15\" style=\"background-color: White;\"></td>";
}
}
echo '</table>';
}
?>
<table align=center>
<tr>
<td><?php opgavefelt(1); ?></td><td><?php svarfelt(); ?></td><td><?php opgavefelt(2); ?></td><td><?php opgavefelt(3); ?></td><td><?php opgavefelt(4); ?></td>
</tr>
</table>
<! Plot felter med data fra array>
<script>
document.getElementById('felt_1_1_1').style.backgroundColor="black"; //Eksempel...
</script>
<! Panel farvemuligheder>
<br><center>Skift farve</center>
<table cellspacing="1" cellpadding="1" border="3" align=center>
<td id="felt_1" onClick="SetBgPalette(this.id);" width="20" height="20" style="background-color: Black;"></td>
<td id="felt_2" onClick="SetBgPalette(this.id);" width="20" height="20" style="background-color: Red;"></td>
<td id="felt_3" onClick="SetBgPalette(this.id);" width="20" height="20" style="background-color: Blue;"></td>
<td id="felt_4" onClick="SetBgPalette(this.id);" width="20" height="20" style="background-color: Yellow;"></td>
</table>
<! Panel valgt farve>
<br><center>Aktuelle farve</center>
<table cellspacing="1" cellpadding="1" border="3" align=center>
<td id="felt_5" width="30" height="30" style="background-color: Black;"></td>
</table>
</body>
</html>
Håber på en løsning :)
/Ditlev
