|
|
@@ -0,0 +1,148 @@
|
|
|
+<!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>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <form action="">
|
|
|
+ <input id="inputOne" type="number">
|
|
|
+ <input id="inputTwo" type="number">
|
|
|
+ <input id="resultInput" type="number">
|
|
|
+ <button id="calcButton">Ok</button>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <script>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // multiplication table
|
|
|
+
|
|
|
+ let row, cell;
|
|
|
+ let table = document.createElement('table');
|
|
|
+ table.setAttribute('style', "margin: auto")
|
|
|
+
|
|
|
+ for (let i = 0; i < 10; i++) {
|
|
|
+ row = document.createElement('tr');
|
|
|
+ for (let j = 0; j < 10; j++) {
|
|
|
+ cell = document.createElement('td');
|
|
|
+
|
|
|
+ let val = i * j;
|
|
|
+ if (val === 0) {
|
|
|
+ val = i || j;
|
|
|
+ }
|
|
|
+
|
|
|
+ cell.setAttribute('style', "border:2px; border-style:solid; border-color:#FF0000; padding:15px; backgroundColor: 'white';")
|
|
|
+ cell.innerText = val;
|
|
|
+
|
|
|
+ row.appendChild(cell);
|
|
|
+ }
|
|
|
+ table.appendChild(row);
|
|
|
+ }
|
|
|
+ document.body.appendChild(table);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const changeBg = (event, color) => {
|
|
|
+ const target = event.target;
|
|
|
+ if (target.tagName === 'TD') {
|
|
|
+ target.style.background = color;
|
|
|
+ //задаем фон родительскому элементу, т.е. строке, в которой находится ячейка
|
|
|
+ target.parentNode.style.background = color;
|
|
|
+ //получаем индекс ячейки в строке
|
|
|
+ const index = event.srcElement.cellIndex;
|
|
|
+ //задаем фон всем ячейкам с таким же индексом
|
|
|
+ const rows = document.querySelectorAll('tr');
|
|
|
+ rows.forEach((row) => row.childNodes[index].style.background = color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ table.onmouseover = (event) => changeBg(event, 'yellow');
|
|
|
+ table.onmouseout = (event) => changeBg(event, '');
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // mine const cellElem = document.getElementsByTagName('td')
|
|
|
+
|
|
|
+ // for (let l = 0; l < cellElem.length; l++) {
|
|
|
+ // cellElem[l].addEventListener('mouseover', (event) => cellElem[l].setAttribute('style', 'border:2px; border-style:solid; border-color:#FF0000; padding:15px; background-color: #f00000;'))
|
|
|
+ // cellElem[l].addEventListener('mouseout', (event) => cellElem[l].setAttribute('style', 'border:2px; border-style:solid; border-color:#FF0000; padding:15px; background - color: #ffffff; '))
|
|
|
+ // }
|
|
|
+
|
|
|
+ // const rowElem = document.getElementsByTagName('tr')
|
|
|
+
|
|
|
+ // for (let k = 0; k < rowElem.length; k++) {
|
|
|
+ // rowElem[k].addEventListener('mouseover', (event) => rowElem[k].setAttribute('style', 'border:2px; border-style:solid; border-color:#FF0000; background-color: #ffff00;'))
|
|
|
+ // rowElem[k].addEventListener('mouseout', (event) => rowElem[k].setAttribute('style', 'border:2px; border-style:solid; border-color:#FF0000; background-color: #ffffff;'))
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //Calculator
|
|
|
+
|
|
|
+ // const inputOne = document.getElementById('inputOne')
|
|
|
+ // const inputTwo = document.getElementById('inputTwo')
|
|
|
+ // const resultInput = document.getElementById('resultInput')
|
|
|
+ // const calcButton = document.getElementById('calcButton')
|
|
|
+
|
|
|
+ // calcButton.onclick = function () {
|
|
|
+ // alert(resultInput.value = (+inputOne.value) + (+inputTwo.value))
|
|
|
+
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // Another variant const table = document.createElement('table');
|
|
|
+
|
|
|
+ // for (let i = 0; i < 10; i++) {
|
|
|
+ // const row = document.createElement('tr');
|
|
|
+ // for (let j = 0; j < 10; j++) {
|
|
|
+ // const col = document.createElement('td');
|
|
|
+ // let val = i * j;
|
|
|
+ // if (val === 0) {
|
|
|
+ // val = i || j;
|
|
|
+ // }
|
|
|
+ // col.innerHTML = val;
|
|
|
+ // row.appendChild(col);
|
|
|
+ // }
|
|
|
+ // table.appendChild(row);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // document.body.appendChild(table);
|
|
|
+
|
|
|
+ // const changeBg = (event, color) => {
|
|
|
+ // const target = event.target;
|
|
|
+ // if (target.tagName === 'TD') {
|
|
|
+ // target.style.background = color;
|
|
|
+ // //задаем фон родительскому элементу, т.е. строке, в которой находится ячейка
|
|
|
+ // target.parentNode.style.background = color;
|
|
|
+ // //получаем индекс ячейки в строке
|
|
|
+ // const index = event.srcElement.cellIndex;
|
|
|
+ // //задаем фон всем ячейкам с таким же индексом
|
|
|
+ // const rows = document.querySelectorAll('tr');
|
|
|
+ // rows.forEach((row) => row.childNodes[index].style.background = color);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // table.onmouseover = (event) => changeBg(event, 'pink');
|
|
|
+ // table.onmouseout = (event) => changeBg(event, '');
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
