|
|
@@ -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'
|
|
|
+ }
|
|
|
+}
|
