HomeWork/js/09-js-dom-cities_countries-table-closures/js/main.js

fetch('https://raw.githubusercontent.com/russ666/all-countries-and-cities-json/master/countries.json')
    .then(res => res.json())
    .then(json => {
        let countrySelect = document.createElement("select");
        let citySelect = document.createElement("select");

        for (let countryName in json) {
            let countrySelectOption = document.createElement("option")
            countrySelectOption.innerText = countryName;
            countrySelect.append(countrySelectOption)
        }

        countrySelect.onchange = () => {
            citySelect.innerHTML = "";

            let cityName = json[countrySelect.value]

            for (let key in cityName) {
                let citySelectOption = document.createElement("option")
                citySelectOption.innerText = cityName[key];
                citySelect.append(citySelectOption)
            }
        }

        document.body.append(countrySelect);
        document.body.append(citySelect);
    })



let table = document.createElement("table");

for (let i = 0; i <= 9; i++) {
    let tr = document.createElement("tr");

    for (let j = 0; j <= 9; j++) {
        let td = document.createElement("td");

        if (i == 0 || j == 0) {
            td.innerText = i + j;
        } else {
            td.innerText = i * j;
        }
        tr.appendChild(td);

        td.onmouseover = function (event) {
            for (let i = 0; i < table.children.length; i++) {          //перебор всех тр и покраска тд с определенным индексом
                table.children[i].children[j].style.background = "yellow";
            }
            tr.style.background = "red"  //красим строку
            td.style.background = "orange";                  //красим саму ячейку
        }

        td.onmouseout = function (event) {
            for (let i = 0; i < table.children.length; i++) {
                table.children[i].children[j].style.background = "";
            }
            tr.style.background = ""
            td.style.background = "";
        }
    }
    table.appendChild(tr);
}
document.body.appendChild(table);

table.style.float = "left";