Javascript: Farge og med rader og til og med celler i en tabell som er opprettet innenfor en funksjon

stemmer
0

ha en bit av et problem med min JS funksjon i øyeblikket.

Hovedsak Målet med spillet er å få koden oppsett på en slik måte der bare på selv rader og selv celler, vil sirklene fra bordet være farget gul, mens resten forblir grønne.

Jeg har det som viser sånn i øyeblikket:

Hvordan det viser når forhåndsvisning HTML-filen

De røde firkanter rundt sirklene indikerer selv rader / Even celler som trenger å bli farget i gult i stedet for grønt.

Her er min kode:

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

Min funksjon er å skape bordet fra nettet brukeren velger, men jeg er usikker på hvordan å nærme JS nødvendig å farge cellene som kreves som nevnt ovenfor.

Noen råd ville være verdsatt, eller kan du gi meg beskjed hvis jeg ikke har vært tydelig nok!

Publisert på 13/01/2020 klokken 23:53
kilden bruker
På andre språk...                            


2 svar

stemmer
1

Ved hjelp av nestede CSS velgere kan du farge cellene som er både på selv rader og selv kolonner.

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

Ovennevnte CSS-regel matcher alle td elementer som er en enda barn av sine foreldre tr som selv er en enda barn av sin overordnede tabellen.

Svarte 14/01/2020 kl. 00:05
kilden bruker

stemmer
0

Her er hvordan det ser ut når du bruker td: n'te barn (selv)

td: n'te barn (selv)

Her er hvordan det ser ut når du bruker tr: n'te barn (selv)

tr: n'te barn (selv)

Her er hvordan det ser ut ved hjelp av en nestet CSS selector

tr: n'te barn (selv), td: n'te barn (selv)

Som vi kan se fra det siste bildet, sirkler fremhevet i en svart boks er de eneste sirkler som skal farges rød (eller gul). Men det blir litt funky ute med den nestede CSS velgeren.

Svarte 14/01/2020 kl. 00:08
kilden bruker

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