123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148 |
- <!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>
-
- 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, '');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- </script>
- </body>
- </html>
|