HomeWork/js6/main.js

// Task Таблица умножения
let myTable = document.createElement('table');

let body=  document.getElementsByTagName('body')[0];


body.append(myTable)

for (let i = 0; i < 10; i++){
  let myTr = document.createElement('tr');
  let myTd = document.createElement('td');
  
   myTable.appendChild(myTr).appendChild(myTd).innerText = `${i}`;

    for (let q = 1; q < 10; q ++) {
      let myTd1= document.createElement('td');
      
      if (i === 0) {
        myTr.appendChild(myTd1).innerText = `${q}`;
      };

      if (i > 0) {
        let resultMultiplication = i * q;
        myTr.appendChild(myTd1).innerText = `${resultMultiplication}`;   
      };
  };
};

// Task Подсветить ячейку

//let td = document.querySelectorAll('td');
// for (let w = 0; w < td.length; w++) {
//   td[w].onmouseover = function () {

//     this.style.backgroundColor = 'red';
//   };
//   td[w].onmouseout = function () {
//     this.style.backgroundColor = '';
//   };
// };

//Task Подсветить строку и столбец,

// let td = document.querySelectorAll('td');
// for (let a = 0; a < td.length; a++) {
//   let trList = document.querySelector('table').getElementsByTagName('tr');
  
//   td[a].onmouseover = function () {
//     td[a].parentElement.style.backgroundColor = 'red';
//     let p = this.cellIndex; 
    
//     for (let q = 0; q < trList.length; q++) {
//       trList[q].getElementsByTagName('td')[p].style.backgroundColor = 'red';
//     }
//   };  

//   td[a].onmouseout = function () {
//     td[a].parentElement.style.backgroundColor = '';

//     for (let r = 0; r < trList.length; r++) {
//       let p = this.cellIndex; 
//       trList[r].getElementsByTagName('td')[p].style.backgroundColor = '';
//     }
//   }
// }


// //Task 
// let input1 = document.createElement('input');
// input1.id = 'input1';
// input1.type = 'number';
// input1.style.display ='block';
// input1.style.marginTop = '20px';

// let input2 = document.createElement('input');
// input2.id = 'input2';
// input2.type = 'number';
// input2.style.display ='block';

// let inputResult = document.createElement('input');
// inputResult.id = 'result';
// inputResult.type = 'text';
// inputResult.style.display ='block';

// let inputSum = document.createElement('button');
// inputSum.id = 'sum';
// inputSum.innerText = 'Sum';

// let inputMinus = document.createElement('button');
// inputMinus.id = 'minus';
// inputMinus.innerText = 'Minus';

// body.appendChild(input1);
// body.appendChild(input2);
// body.appendChild(inputResult);
// body.appendChild(inputMinus);
// body.appendChild(inputSum);

// function getSum () {
//   let result = +(input1.value) + (+input2.value);
//   inputResult.value = `${result}`;
//   return;
  
// };

// function getDifference() {
//   let result = input1.value - input2.value;
//   inputResult.value = `${result}`;
//   return;
// };

// inputSum.addEventListener('click', getSum);
// inputMinus.addEventListener('click', getDifference);

// //Task 
// let input1 = document.createElement('input');
// input1.id = 'input1';
// input1.type = 'number';
// input1.style.display ='block';
// input1.style.marginTop = '20px';

// let input2 = document.createElement('input');
// input2.id = 'input2';
// input2.type = 'number';
// input2.style.display ='block';

// let inputResult = document.createElement('input');
// inputResult.id = 'result';
// inputResult.type = 'text';
// inputResult.style.display ='block';
// inputResult.placeholder = "result";

// body.appendChild(input1);
// body.appendChild(input2);
// body.appendChild(inputResult);


// function calc() {
//   inputResult.value = (+input1.value) + (+input2.value);
// }

// input1.oninput = calc;
// input2.oninput = calc;

  
//Task доп задание на паре
let td = document.querySelectorAll('td');
for (let a = 0; a < td.length; a++) {
  let trList = document.querySelector('table').getElementsByTagName('tr');
  
  td[a].onmouseover = function () {
    td[a].parentElement.style.backgroundColor = 'red';
    let p = td[a].cellIndex; 
    
    for (let q = 0; q < trList.length; q++) {
      trList[q].getElementsByTagName('td')[p].style.backgroundColor = 'red';
    }
  };  

  td[a].onmouseout = function () {
    td[a].parentElement.style.backgroundColor = '';

    for (let r = 0; r < trList.length; r++) {
      let p = td[a].cellIndex; 
      trList[r].getElementsByTagName('td')[p].style.backgroundColor = '';
    }
  }
}