Sudoku-Feld mit CSS und HTML?
Ich bin gerade dabei ein Sudoku in PHP zu programmieren.
Meine Frage: Ist es möglich, dass ich die 81 Felder nicht alle, wie hier -->(<td><input id="cell-0" type="text"></td>) erstellen muss? Sprich, wie schaffe ich es, dass ich 81 Felder habe, die ich einstellen kann, ohne dass ich sie 81 mal erstellen muss und sie in CSS verändern kann?
Ich freue mich über jede Antwort! :)
2 Antworten
Sprich, wie schaffe ich es, dass ich 81 Felder habe, die ich einstellen kann, ohne dass ich sie 81 mal erstellen muss und sie in CSS verändern kann?
Mit jeder client- oder serverseitigen Skriptsprache die Du beherrschst. Diese übernimmt mit zwei verschachtelten Schleifen die Schreibarbeit für Dich.
Alex
wie wäre es mit einem kleinen JavaScript-Schnipsel?
<table id="sudoku"></table>
<script type="text/javascript">
var sudoku = document.querySelector('#sudoku'),// Das Table-Element, wo die Felder eingefügt werden
idx = 0;// der erste Index des Inputs
for(x = 0; x < 9; x++){// 9 Zeilen einfügen
sudoku.appendChild(document.createElement('tr'));
for(y = 0; y < 9; y++)// in jede Zeile 9 Spalten eifügen
sudoku.lastChild.appendChild((new DOMParser()).parseFromString('<td><input id="cell-{idx}" type="text"></td>'.replace('{idx}', idx++), 'text/html').body.firstChild)
}
</script>
Das CSS kannst du bestimmt selbst machen :-)
Man könnte es, wie Alex schon erwähnt hat, auch mit PHP machen. Ich glaube aber, dass das für dich bis jetzt noch ein bisschen zu unverständlich wäre.
Hier trotzdem ein Beispiel:
<table>
<?
$idx = 0; # anfang der Numerrierung
for($x = 0; $x < 9; $x++): # 9 mal die Zeile kopieren
?>
<tr>
<? for($y = 0; $y < 9; $y++): # 9 mal die Zelle kopieren ?>
<td><input id="cell-<? echo $idx++; ?>" type="text"></td>
<? endfor; # innere Schleife schließen ?>
</tr>
<? endfor; # äußere Schleife schließen ?>
</table>
Ich vermute aber, dass die PHP-Klammern (<? und ?>) dich nur verwirren würden -- auch weil es zwischen dem HTML-Code stehen kann. Zum ausprobieren brauchst du einen PHP-Server.
Falls du keinen installiert hast, kannst du auch einfach QuickPHP benutzen (nur exe, keine Installation).
Hier die Beispieldatei mit QuickPHP: https://ufile.io/043m7nlx (30 Tage)
1) Auch wenn du nicht PHP nutzen müsstest, wäre ein serverseitiges Rendern sinnvoller, als das mit JavaScript dynamisch im Nachgang zu machen. Deswegen ist der Lösungsweg von EinAlexander deutlich vorzuziehen.
Nebenbei sei auch gesagt, dass es noch andere Alternativen, als nur PHP gibt, um eine serverseitige Webanwendung zu entwickeln.
2) JavaScript und Java sind zwei völlig unterschiedliche Programmiersprachen.
Erstmal vielen Dank! Leider habe ich mich noch nie mit JAvaScript beschäftigt... Gibt es vielleicht auch eine andere Möglichkeit? Und auf jeden Fall danke! :)