Sudoku-Feld mit CSS und HTML?

2 Antworten

EinAlexander
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, CSS
12.04.2019, 22:06
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
vaxearts 
Fragesteller
 13.04.2019, 16:54

Vielen Dank!

0
Win7User
13.04.2019, 08:46

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 :-)
vaxearts 
Fragesteller
 13.04.2019, 15:33

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! :)

0
Win7User  13.04.2019, 16:05
@vaxearts

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
vaxearts 
Fragesteller
 13.04.2019, 16:53
@Win7User

Ich habe im Moment halt die Aufgabe, dass ich das Sudoku-Feld mit PHP erstelle, allerdings ohne, dass ich 81x ein Feld erstelle... Einfach, mit PHP, dass es übersichtlicher wird. Am Ende der Aufgabe soll ich mich erst mit Java beschäftigen...

0
regex9  13.04.2019, 18:27
@vaxearts

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.

0