12345678910111213141516171819202122232425262728293031323334353637383940 |
- let afooter = document.querySelector("#afooter");
- let bfooter = document.querySelector("#bfooter");
- let calculeit = document.querySelector("#calculeit");
- let output = document.querySelector("#output");
- calculeit.addEventListener("click", function(){ calc });
- function calc() {
- output.value = ((+afooter.value) + (+bfooter.value));
- };
- afooter.oninput = calc;
- bfooter.oninput = calc;
- let table = document.createElement("table");
- let src = document.querySelector("script");
- let td = document.getElementsByTagName("td");
- let tr = document.getElementsByTagName("tr");
- document.body.insertBefore(table, src);
- let namb = "";
- for (let i = 0; i < 10; i++){
- namb += "<tr>"
- for (let j = 0; j < 10; j++){
- if (i == 0){namb += "<td>" + j + "</td>";}
- else {namb += "<td>" + i * (j === 0 ? 1 : j) + "</td>";}
- }
- namb += "</tr>"
- }
- table.innerHTML = namb
- for (let i = 0; i < 100; i++) {
- td[i].addEventListener("mouseover", function(){
- for (let x = 0; x < 10; x++){td[i].parentElement.children[x].style.backgroundColor = "#98f9d2";}
- for (let y = 0; y < 100; y++){if (td[i].cellIndex === td[y].cellIndex)
- {td[y].style.backgroundColor = "#98f9d2"
- };
- };
- });
- td[i].addEventListener("mouseout", function(){
- for (let x = 0; x < 10; x++) {td[i].parentElement.children[x].style.backgroundColor = "#b3fcde";};
- for (let y = 0; y < 100; y++) {
- if (td[i].cellIndex === td[y].cellIndex) {td[y].style.backgroundColor = "#b3fcde";};
- };
- });
- };
|