DmitriyPanasenko
/
homework


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
							<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <script>
        {
            let table = document.createElement('table')
            let tr1 = document.createElement('tr')
            table.append(tr1)
            tr1.innerHTML = '<th>0</th>'

            function backgroundColored(event) {

                let arrClasses = event.target.classList
                for (elemClass of arrClasses) {
                    let elements = document.querySelectorAll('.' + elemClass)
                    for (element of elements) {
                        element.classList.add('backgroundColorGrey')
                    }
                }
            }

            function backgroundDefault(event) {
                let arrClasses = event.target.classList
                for (elemClass of arrClasses) {
                    let elements = document.querySelectorAll('.' + elemClass)
                    for (element of elements) {
                        element.classList.remove('backgroundColorGrey')
                    }
                }
            }


            for (n = 1; n < 10; n++) {

                let tr = document.createElement('tr')
                table.append(tr)
                let td1 = document.createElement('td')
                tr.append(td1)
                td1.innerText = n

                for (i = 1; i < 10; i++) {

                    let td = document.createElement('td')
                    tr.append(td)
                    td.innerText = n * i
                    td.classList.add('row' + n, 'col' + i)
                    td.onmouseover = backgroundColored
                    td.onmouseout = backgroundDefault

                    if (n === 1) {
                        let th = document.createElement('th')
                        th.innerText = n * i
                        tr1.append(th)
                    }
                }
            }
            document.body.append(table)
        }
    </script>
</body>
</html>