JavaScript: Renk hatta satır ve bir işlev içinde oluşturulan tablonun hatta hücreler

oy
0

Şu anda benim JS işlevi ile ilgili bir sorun nedeniyle biraz sahip.

gerisi yeşil kalırken Esasen burada oyunun amacı, sadece hatta satırlar ve hatta hücreleri üzerinde, tablodan çevreler sarı renkli olacak şekilde kod kurulum elde etmektir.

Ben şu anda böyle gösteriyor vardır:

HTML dosyasını önizlenirken gösterir nasıl

çevrelerinde etrafında kırmızı kareler hatta satır / ihtiyaç sarı yerine yeşil renkli edilecek bile hücrelerini gösterir.

İşte benim kodudur:

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

Benim işlevi Kullanıcının seçtiği şebekesinden tablo yaratıyor ama JS yukarıda da belirtildiği gibi gerekli hücreleri renklendirmek için gerekli yaklaşım nasıl emin değilim.

Herhangi bir tavsiye takdir ya ben yeterince açık olmamıştır varsa bana bildirin lütfen olurdu!

Oluştur 13/01/2020 saat 21:53
kaynak kullanıcı
Diğer dillerde...                            


2 cevaplar

oy
1

Hatta satırlar ve hatta sütunlar üzerinde hem hücreleri renklendirebilirsiniz iç içe CSS seçicileri kullanma.

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

Yukarıdaki CSS kuralı kendisi ana tablodaki eşit çocuğu, üst tr eşit çocuk tüm td elemanlarını eşleşir.

Cevap 13/01/2020 saat 22:05
kaynak kullanıcı

oy
0

İşte td kullanırken nasıl görünüyor: n'inci-çocuk (çift)

td: n'inci-çocuk (çift)

İşte tr kullanırken nasıl görünüyor: n'inci-çocuk (çift)

tr: n'inci-çocuk (çift)

Burada iç içe bir CSS seçici kullanarak böyle görünüyor

tr: n'inci-çocuk (çift), td: n'inci-çocuk (çift)

Geçen görüntüden de görebileceğiniz gibi, bir kara kutu vurgulanan çevreler kırmızı (veya sarı) renkli gereken tek çevrelerinizdir. Ama iç içe CSS seçici ile seyir biraz korkak alır.

Cevap 13/01/2020 saat 22:08
kaynak kullanıcı

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