script.js 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. // таблица умножения
  2. let table = document.createElement('table')
  3. table.id = 'mulTable'
  4. for(let i = 1; i < 10; i++) {
  5. let tr = document.createElement('tr')
  6. for(let j = 1; j < 10; j++) {
  7. let td = document.createElement('td')
  8. td.style.textAlign = 'center'
  9. td.style.padding = '5px'
  10. td.style.border = '1px solid dimgrey'
  11. td.innerText = `${i * j}`
  12. tr.appendChild(td)
  13. }
  14. table.appendChild(tr)
  15. }
  16. document.getElementsByTagName('body')[0].appendChild(table)
  17. // подсветить ячейку и строку и колонку
  18. document.getElementById('mulTable').addEventListener('mouseover', (e)=> {
  19. if(e.target.closest('td')) {
  20. for(let i of e.currentTarget.children) {
  21. i.children[e.target.cellIndex].style.backgroundColor = 'black'
  22. i.children[e.target.cellIndex].style.color = 'white'
  23. }
  24. e.target.closest('td').style.backgroundColor = 'yellow'
  25. e.target.closest('td').style.color = 'black'
  26. e.target.closest('tr').style.backgroundColor = 'purple'
  27. }
  28. })
  29. document.getElementById('mulTable').addEventListener('mouseout', (e)=> {
  30. if(e.target.closest('td')) {
  31. for(let i of e.currentTarget.children) {
  32. for(let j of i.children) {
  33. j.style.backgroundColor = 'transparent'
  34. j.style.color = 'black'
  35. }
  36. }
  37. e.target.closest('td').style.backgroundColor = 'transparent'
  38. e.target.closest('tr').style.backgroundColor = 'transparent'
  39. }
  40. })
  41. //сalc