irmantas_radavicius

Untitled

Dec 1st, 2021
965
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>Javascript</title>  
  5.     <style>
  6.         td {
  7.             text-align: right;
  8.             padding: 3px;
  9.             border: 1px solid black;
  10.         }
  11.         .red {
  12.             background-color: red;
  13.         }
  14.         .green {
  15.             background-color: lightgreen;
  16.         }
  17.     </style>
  18. </head>
  19. <body> 
  20.     <div id="output"></div>
  21.    
  22.     <script>       
  23.         function paintGreen(id){                       
  24.             // get classes before the event, split by space
  25.             let myElem = document.getElementById(id);          
  26.             let myClasses = myElem.className.split(" ");
  27.            
  28.             // check for green and recopy other classes
  29.             let output = "";           
  30.             let foundGreen = false;
  31.             for(let i = 0; i < myClasses.length; ++i){
  32.                 if (myClasses[i] == "green"){                  
  33.                     foundGreen = true;
  34.                 } else {               
  35.                     output += (" " + myClasses[i]);
  36.                 }
  37.             }
  38.             // add green if there was none
  39.             if (!foundGreen){
  40.                 output += " green";            
  41.             }
  42.             myElem.className = output.trim();          
  43.         }
  44.    
  45.    
  46.         let content = "";
  47.         content += "<table>\n";
  48.         let cols = 8;
  49.         let rows = 8;
  50.         let value = 0;
  51.         for(let i = 0; i < rows; ++i){
  52.             content += "   <tr>\n";
  53.             for(let j = 0; j < cols; ++j){
  54.                 content += "      <td onclick=\"paintGreen(this.id)\" ";   
  55.                 if ((i + j) % 2){
  56.                     content += "class=\"\"";       
  57.                 } else {
  58.                     content += "class=\"red\"";                    
  59.                 }
  60.                 content += " id=\"td-" + value + "\">" + String.fromCharCode(97+j) + (i+1) + "</td>\n";
  61.                 ++value;
  62.             }          
  63.             content += "   </tr>";
  64.         }      
  65.         content += "</table>";
  66.        
  67.         let myDiv = document.getElementById("output");
  68.         myDiv.innerHTML = content;             
  69.        
  70.     </script>      
  71.  
  72. </body>
  73. </html>
  74.  
  75.  
  76.  
RAW Paste Data