जावास्क्रिप्ट: रंग भी पंक्तियों और एक समारोह के भीतर निर्मित तालिका की भी कोशिकाओं

वोट
0

इस समय मेरी जे एस समारोह के साथ एक समस्या का एक सा है।

अनिवार्य रूप से खेल यहाँ का उद्देश्य, जबकि बाकी हरा बना रहेगा इस तरह से है, जहां केवल भी पंक्तियों और यहां तक ​​कि कोशिकाओं पर, मेज से हलकों पीले रंग का हो जाएगा में कोड सेटअप पाने के लिए है।

मैं इसे इस समय इस तरह दिखाई दे रहे हैं:

यह कैसे पता चलता है जब HTML फ़ाइल का पूर्वावलोकन

हलकों के आसपास लाल वर्गों भी पंक्तियों / भी कोशिकाओं है कि जरूरत के बजाय पीले हरे रंग में रंगा जा करने के लिए संकेत मिलता है।

यहाँ मेरी कोड है:

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

मेरे समारोह ग्रिड से तालिका पैदा कर रही है उपयोगकर्ता चयन, लेकिन मैं अनिश्चित दृष्टिकोण कैसे जे एस जैसा कि ऊपर उल्लेख आवश्यक कोशिकाओं रंग करने के लिए आवश्यक है।

किसी भी सलाह की सराहना की है, या मुझे पता है कि अगर मैं स्पष्ट पर्याप्त नहीं किया गया है तो कृपया!

13/01/2020 को 23:53
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


2 जवाब

वोट
1

नेस्टेड CSS चयनकर्ताओं का उपयोग करके आप कोशिकाओं है कि दोनों भी पंक्तियों और यहां तक ​​कि स्तंभों पर हैं रंग कर सकते हैं।

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

उपरोक्त CSS नियम सभी टीडी तत्वों है कि उनके माता-पिता टीआर का एक भी बच्चा जो अपने आप में अपनी मूल तालिका का एक भी बच्चा है कर रहे हैं मेल खाता है।

14/01/2020 को 00:05
का स्रोत उपयोगकर्ता

वोट
0

यहाँ जब टीडी का उपयोग कर यह कैसे दिखता है: n वें वाले बच्चे (भी)

टीडी: n वें वाले बच्चे (भी)

यहाँ जब टीआर का उपयोग कर यह कैसे दिखता है: n वें वाले बच्चे (भी)

टीआर: n वें वाले बच्चे (भी)

यह इस प्रकार से एक नेस्टेड सीएसएस चयनकर्ता का उपयोग लग रहा है

टीआर: n वें वाले बच्चे (भी), टीडी: n वें वाले बच्चे (भी)

हम पिछले छवि से देख सकते हैं, हलकों एक ब्लैक बॉक्स में प्रकाश डाला केवल हलकों कि लाल (या पीला) रंग का किया जाना चाहिए। लेकिन यह थोड़ा अजीब नेस्टेड सीएसएस चयनकर्ता के साथ की तलाश में हो जाता है।

14/01/2020 को 00:08
का स्रोत उपयोगकर्ता

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