<!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>Document</title>
</head>
<body>
<style>
.cell{
width:40px;
height: 40px;
border:1px solid black;
text-align:center;
cursor:pointer;
}
.row:nth-child(even){
background: #eeeeee;
}
</style>
<table id = "table1">
</table>
<br><br><br>
<input type="number" name="" id="inp1" placeholder="Number 1">
<input type="number" name="" id="inp2" placeholder="Number 2">
<input type="text" id="result" placeholder="Sum" readonly>
<button id="calcBtn">Calc</button>
<script>
//ТАБЛИЦА УМНОЖЕНИЯ
// let table = document.querySelector('#table1')
// for(let i=1; i<10;i++){
// let tr = document.createElement('tr')
// tr.classList.add("row")
// table.append(tr)
// for(let j = 1;j<10;j++){
// let td = document.createElement('td')
// td.innerText = i*j
// tr.append(td)
// td.classList.add("cell")
// }
// }
//ПОДСВЕТИТЬ ЯЧЕЙКУ
// let table = document.querySelector('#table1')
// for(let i=1; i<10;i++){
// let tr = document.createElement('tr')
// tr.classList.add("row")
// table.append(tr)
// for(let j = 1;j<10;j++){
// let td = document.createElement('td')
// td.innerText = i*j
// tr.append(td)
// td.classList.add("cell")
// td.onmouseover = ()=>td.style.backgroundColor = "#CECECE"
// td.onmouseleave = ()=>td.style.backgroundColor = ""
// }
// }
//ПОДСВЕТИТЬ СТРОКУ И СТОЛБЕЦ
function lightUp(event){
let cellIdx = this.cellIndex
let rows = this.parentElement.parentElement.children
this.parentElement.style.backgroundColor = "#CECECE"
for(let row of rows){
row.children[cellIdx].style.backgroundColor = "#CECECE"
}
}
function lightDown(event){
let cellIdx = this.cellIndex
let rows = this.parentElement.parentElement.children
this.parentElement.style.backgroundColor = ""
for(let row of rows){
row.children[cellIdx].style.backgroundColor = ""
}
}
let table = document.querySelector('#table1')
for(let i=1; i<10;i++){
let tr = document.createElement('tr')
tr.classList.add("row")
table.append(tr)
for(let j = 1;j<10;j++){
let td = document.createElement('td')
td.innerText = i*j
tr.append(td)
td.classList.add("cell")
td.addEventListener('mouseover',lightUp)
td.addEventListener('mouseleave',lightDown)
}
}
//CALC
let inp1 = document.querySelector("#inp1")
let inp2 = document.querySelector("#inp2")
calcBtn.onclick = function(){
alert((+inp1.value) + (+inp2.value))
}
//CALC LIVE
function calc() {
result.value = (+inp1.value) + (+inp2.value)
}
inp1.oninput = calc
inp2.oninput = calc
</script>
</body>
</html>