Javascript: Farbe sogar Zeilen und sogar Zellen einer Tabelle innerhalb einer Funktion erstellt

stimmen
0

im Moment mit meinem JS-Funktion ein bisschen ein Problem haben.

Im Wesentlichen hier das Ziel des Spiels ist es, den Code-Setup in einer solchen Art und Weise zu bekommen, wo nur auf geraden Zeilen und sogar Zellen, werden die Kreise aus der Tabelle gelb gefärbt sein, während der Rest grün bleiben.

Ich habe es im Moment wie dieser zeigt:

Wie es zeigt, wenn die HTML-Datei der Vorschau

Die roten Quadrate um die Kreise zeigen die geraden Zeilen / sogar Zellen, die Notwendigkeit, statt grün gelb gefärbt werden.

Hier ist mein Code:

    <!DOCTYPE html>
<html lang=en dir=ltr>
  <head>
    <style>
      body {
        background-color: linen;
      }
      td {
        height: 75px;
        width: 75px;
        background-color: green;
        border-radius: 50%;
        display: inline-block;
      }

    </style>
    <meta charset=utf-8>
    <title></title>
    <script type=text/javascript>

      function validation(){
        var userSubmit = document.getElementById('size').value; //takes the users input and stores it within the variable userSubmit.
        var num_rows = userSubmit; //assigning the users input to the number of rows.
        var num_cols = userSubmit; //assigning the users input to the number of colums.
        var tableBody = ; //empty string setup for the table.

        for (var r=0; r<num_rows; r++){
          tableBody += <tr>; //for loop going through the number of rows required to complete the table.
            for (var c=0; c<num_cols; c++){
              tableBody += <td> + c + </td>;//for loop, within the rows for loop, this is to determine the number of columns required in the table
            }
            tableBody += </tr>;
        }
        document.getElementById('wrapper').innerHTML = (<table> + tableBody + </table>);
      }

    </script>
  </head>
  <body>
    <form name=form1>
      <select id=size>
      <option value=3>3x3</option>
      <option value=5>5x5</option>
      <option value=7>7x7</option>
      </select>
    </form>
    <button type=submit onclick=validation()>Generate Graph</button>

    <div id=wrapper></div>
  </body>
</html>

Meine Funktion ist die Erstellung der Tabelle aus dem Netz wählt der Benutzer, aber ich bin nicht sicher, wie die JS Ansatz erforderlich, um die Zellen wie oben erwähnt erforderlich einzufärben.

Jede Beratung wird gebeten, oder lassen Sie es mich wissen, wenn ich nicht klar genug gewesen!

Veröffentlicht am 13/01/2020 um 23:53
quelle vom benutzer
In anderen Sprachen...                            


2 antworten

stimmen
1

Mit verschachtelten CSS-Selektoren können Sie die Zellen Farbe, die beide auf geraden Zeilen und geraden Spalten.

tr:nth-child(even) td:nth-child(even) {
  background-color: red;
}

Die obige CSS-Regel entspricht alle td-Elemente, die ein noch Kind ihrer Eltern tr sind, die selbst ein noch Kind seiner Eltern-Tabelle ist.

Beantwortet am 14/01/2020 um 00:05
quelle vom benutzer

stimmen
0

Hier ist, wie es aussieht, wenn td mit: nth-child (auch)

td: n-te-Kind (auch)

Hier ist, wie es aussieht, wenn tr mit: nth-child (auch)

tr: nth-child (auch)

Hier ist, wie es aussieht, einen verschachtelten CSS-Selektor

tr: nth-child (selbst), td: n-te-Kind (auch)

Wie wir aus dem letzten Bild sehen können, die in einem schwarzen Kasten hervorgehoben Kreise sind die einzigen Kreise, die rot gefärbt werden soll (oder gelb). Aber es wird ein flippiges Bit mit dem verschachtelten CSS-Selektor suchen.

Beantwortet am 14/01/2020 um 00:08
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more