1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 |
- // таблица умножения
- 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}`
- tr.appendChild(td)
- }
- table.appendChild(tr)
- }
- document.getElementsByTagName('body')[0].appendChild(table)
- // подсветить ячейку и строку и колонку
- document.getElementById('mulTable').addEventListener('mouseover', (e)=> {
- if(e.target.closest('td')) {
- for(let i of e.currentTarget.children) {
- i.children[e.target.cellIndex].style.backgroundColor = 'black'
- i.children[e.target.cellIndex].style.color = 'white'
- }
-
- e.target.closest('td').style.backgroundColor = 'yellow'
- e.target.closest('td').style.color = 'black'
- e.target.closest('tr').style.backgroundColor = 'purple'
- }
- })
- document.getElementById('mulTable').addEventListener('mouseout', (e)=> {
- if(e.target.closest('td')) {
- for(let i of e.currentTarget.children) {
- for(let j of i.children) {
- j.style.backgroundColor = 'transparent'
- j.style.color = 'black'
- }
- }
-
- e.target.closest('td').style.backgroundColor = 'transparent'
- e.target.closest('tr').style.backgroundColor = 'transparent'
- }
- })
- //сalc
|