|
|
@@ -0,0 +1,66 @@
|
|
|
+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";
|
