|
|
@@ -0,0 +1,144 @@
|
|
|
+<!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>
|
ilya_shyian