daily pastebin goal
10%
SHARE
TWEET

Untitled

a guest Apr 11th, 2018 60 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         * {
  8.             box-sizing: border-box;
  9.         }
  10.         .table {
  11.             width: 500px;
  12.             border: 1px solid rgba(0,0,0,.3);
  13.             margin: auto;
  14.         }  
  15.         .table__row {
  16.             height: 50px;
  17.             text-align: center;
  18.         }
  19.         .table__col {
  20.             width: 45px;
  21.             height: 45px;
  22.             display: inline-block;
  23.             margin: 2px;
  24.             background-color: blue;
  25.         }
  26.         .table__col.marked {
  27.             background-color: red;
  28.         }
  29.     </style>
  30.  
  31. </head>
  32. <body>
  33.     <div id="table" class="table"></div>
  34. <script>
  35.     (function () {
  36.         let cnt = 0;
  37.         const col = 10;
  38.         const row = 10;
  39.         const tblBlock = document.querySelector("#table");
  40.  
  41.         for (let i = 0; i < col; i++)
  42.         {
  43.             let rowBlock = document.createElement("div");
  44.             rowBlock.className = "table__row";
  45.  
  46.             tblBlock.append(rowBlock);
  47.             for (let j = 0; j < row; j++)
  48.             {
  49.                 let colBlock = document.createElement("div");              
  50.                 colBlock.className = "table__col";
  51.  
  52.                 cnt++;
  53.  
  54.                 if ( cnt % 3 === 0) {
  55.                     colBlock.classList.add("marked");  
  56.                 }
  57.  
  58.  
  59.                 rowBlock.append(colBlock);
  60.             }
  61.         }
  62.     })();
  63. </script>
  64. </body>
  65. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top