create table, add palitra

2021-11-11 21:53:20 +03:00 · 2021-11-11 21:53:20 +03:00 · 2c707dafc1
commit 2c707dafc1
2 changed files with 62 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            .table td{
+                padding: 10px;
+                border: 1px solid black
+            }
+        </style>
+    </head>
+    <body>
+        <table class='table' id='qq' ></table>
+        <input type='color' id='palitra' >
+
+        <script src="main.js"></script>
+        
+    </body>
+</html>
--- a/main.js
+++ b/main.js
@ -0,0 +1,44 @@
+
+let elem = document.getElementById('qq');
+
+let a_click = false
+
+
+function createTable (parent, cols, rows){  
+let table = document.createElement('table')
+document.onmousedown = function(){
+    a_click = true
+}
+
+document.onmouseup = function(){
+    a_click = false
+}
+let palitra = document.getElementById('palitra');
+
+    for ( i=0; i<rows; i++){
+      let tr=document.createElement('tr')  
+       
+
+        for (j=0; j<cols; j++){
+
+           let td =  document.createElement('td')
+           td.onmouseover = function(){
+                if (a_click){
+
+                    td.style.backgroundColor = palitra.value
+                }
+
+
+            }
+            td.onclick = function(){
+                td.style.backgroundColor = palitra.value
+            }
+               
+           tr.append(td)
+        }
+        table.append(tr)
+    }
+    parent.append(table)
+}
+
+createTable (elem, 20, 20)