il y a 3 ans · 4fb080c8cd
--- a/DOM-closures/index.html
+++ b/DOM-closures/index.html
@@ -0,0 +1,13 @@
 
																+<!DOCTYPE html>
															
 
																+<html lang="en">
															
 
																+<head>
															
 
																+    <meta charset="UTF-8">
															
 
																+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
															
 
																+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
															
 
																+    <title>DOM closures</title>
															
 
																+</head>
															
 
																+<body>
															
 
																+    <h1>DOM task but using clouseres</h1>
															
 
																+    <script src="./script.js"></script>
															
 
																+</body>
															
 
																+</html>
															
--- a/DOM-closures/script.js
+++ b/DOM-closures/script.js
@@ -0,0 +1,46 @@
 
																+let table = document.createElement('table')
															
 
																+table.id = 'mulTable'
															
 
																+
															
 
																+for(let i = 1; i < 10; i++) {
															
 
																+    let tr = document.createElement('tr')
															
 
																+    for(let j = 1; j < 10; j++) {
															
 
																+        let td = document.createElement('td')
															
 
																+        td.style.textAlign = 'center'
															
 
																+        td.style.padding = '5px'
															
 
																+        td.style.border = '1px solid dimgrey'
															
 
																+        td.innerText = `${i * j}`
															
 
																+        td_tr_Listener(td, j, i, tr)
															
 
																+        tr.appendChild(td)
															
 
																+    }
															
 
																+    table.appendChild(tr)
															
 
																+}
															
 
																+
															
 
																+document.getElementsByTagName('body')[0].appendChild(table)
															
 
																+
															
 
																+function td_tr_Listener(td, col, row, tr) {
															
 
																+    let _td = td
															
 
																+    let _tr = tr
															
 
																+    let _col, _row
															
 
																+
															
 
																+    td.onmouseover = function(td) {
															
 
																+        _col = col - 1
															
 
																+        _row = row - 1
															
 
																+        for(let i of _tr.parentElement.children) {
															
 
																+            i.children[_col].style.backgroundColor = 'black'
															
 
																+            i.children[_col].style.color = 'white'
															
 
																+        }
															
 
																+        _td.style.backgroundColor = 'magenta'
															
 
																+        _tr.parentElement.children[_row].style.backgroundColor = 'aquamarine'
															
 
																+    }
															
 
																+
															
 
																+    td.onmouseout = function(td) {
															
 
																+        for(let i of _tr.parentElement.children) {
															
 
																+            for(let j of i.children) {
															
 
																+                j.style.backgroundColor = 'transparent'
															
 
																+                j.style.color = 'black'
															
 
																+            }
															
 
																+        }
															
 
																+        _td.style.backgroundColor = 'transparent'
															
 
																+        _tr.style.backgroundColor = 'transparent'
															
 
																+    }
															
 
																+}