0

В HTML файле создал таблицу квадратов, которая, при наведение на квадрат числа, должна подсвечивать горизонтальную и вертикальную линию элементов (как на скриншоте) Скрин

Сделать это я хочу через JS, получилось создать массив с значениями из HTML файла и получилось отсортировать и создать массив с элементами, которые должны подсветиться, в итоге. Теперь никак не получается связать этот массив с HTML и CSS, чтоб поменять цвет.

let tableResponsive = document.getElementsByClassName('table-responsive')[0],
  tables = document.getElementsByClassName('table')[0],
  labelPrimary = document.getElementsByClassName('label-primary'),
  greenBackLeft = document.getElementsByClassName('green-back-left'),
  greenBack = document.getElementsByClassName('green-back'),
  resNumber = document.getElementsByClassName('res-number')[0],
  resAnswer = document.getElementsByClassName('res-answer')[0],
  notUseUp = document.getElementsByClassName('do-not-use-up'),
  notUseLeft = document.getElementsByClassName('do-not-use-left'),
  resultStyle = document.getElementsByClassName('result-style')[0],
  rows = document.querySelectorAll('.row'),
  firstLine = document.getElementsByClassName('first-line'),
  twoLine = document.querySelectorAll('.two-line');

function getRow() {
  for (let i = 0; i < rows.length; i++) {
    const rowsValue = [];
    for (let k = 0; k < rows[i].childNodes.length; k++) {
      if (rows[i].childNodes[k].innerHTML) {
        rowsValue.push(rows[i].childNodes[k].innerHTML);
      }

    }
    table.push(rowsValue);
  }
  //console.log(table);
}

const activeIndex = [];

function getIndex(index) {
  const rowIndex = table.findIndex((row) => row.find((i) => i == index));
  const elIndex = table[rowIndex].findIndex((i) => i == index);
  const rowValue = table[rowIndex].slice(0, elIndex);
  for (let i = 0; i <= rowIndex; i++) {
    activeIndex.push(table[i][elIndex]);
  }
  activeIndex.push(...rowValue);
  // console.log(rowIndex);
  // console.log(elIndex);
  // console.log(rowValue);
  // console.log(activeIndex);
}

tables.addEventListener('mouseover', function(event) {
  let target = event.target;
  const labelMass = [];
  const table = [];
  const activeIndex = [];
  for (let i = 0; i < rows.length; i++) {
    const rowsValue = [];
    for (let k = 0; k < rows[i].childNodes.length; k++) {
      if (rows[i].childNodes[k].innerHTML) {
        rowsValue.push(+rows[i].childNodes[k].innerHTML);
      }
    }
    table.push(rowsValue);
  }
  console.log(table);
  let rowIndex = table.findIndex((row) => row.find((i) => i == target.innerHTML));
  let elIndex = table[rowIndex].findIndex((i) => i == target.innerHTML);
  let rowValue = table[rowIndex].slice(0, elIndex + 1);
  for (let i = 0; i <= rowIndex; i++) {
    activeIndex.push(table[i][elIndex]);
  }
  activeIndex.push(...rowValue);
  console.log(activeIndex);
  for (let i = 0; i <= activeIndex.length; i++) {
    for (let k = 0; k <= labelPrimary.length; k++) {
      if (labelPrimary[k] == activeIndex[i]) {
        console.log(labelPrimary[k].innerHTML)
        labelPrimary[k].style.backgroundColor = '#4D005B';
      }
    }
  }
});


tables.addEventListener('mouseout', function(event) {
  let target = event.target;
  if (target.classList.contains('label-primary') && !target.classList.contains('do-not-use-up') && !target.classList.contains('do-not-use-left')) {
    for (let i = 0; i < labelPrimary.length; i++) {
      if (labelPrimary[i] == target) {
        labelPrimary[i].style.backgroundColor = '#dfcdf2';
        labelPrimary[i].style.color = 'black';
      }
    }
  }
});
body {
  background-color: #dfcdf2;
}

.resp {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.table-responsive {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: auto;
  height: auto;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  padding-top: 100px;
}

.table {
  width: auto;
  height: auto;
}

.green-back {
  color: white;
  width: 50px;
  background-color: rgb(143, 200, 0);
  font-size: 1.8em;
  font-weight: 600;
  letter-spacing: 5px;
  padding: 10px;
  padding-left: 25px;
  text-shadow: 0px 4px 3px rgb(0 0 0 / 70%), 0px 8px 13px rgb(0 0 0 / 40%), 0px 18px 23px rgb(0 0 0 / 100%);
}

.green-back-left {
  padding: 10px;
  text-align: center;
}

.label-primary {
  text-align: center;
  font-size: 30px;
  border: 1px solid #ddd;
}

.label-primary:hover {
  cursor: pointer;
}

.text-center {
  padding-top: 25px;
}

.result-style {
  text-align: center;
}

.res-number {
  color: red;
  font-size: 55px;
  font-weight: 600;
}

.res-answer {
  color: red;
  font-size: 55px;
  font-weight: 600;
}

.result-style p {
  color: green;
  font-size: 40px;
  font-weight: 400;
}
<div class="table-responsive">
  <div class="resp">
    <table class="table">
      <thead>
        <tr class="row">
          <th class="first-line label-primary green-back do-not-use-up"></th>
          <th class="first-line label-primary green-back do-not-use-up">0</th>
          <th class="first-line label-primary green-back do-not-use-up">1</th>
          <th class="first-line label-primary green-back do-not-use-up">2</th>
          <th class="first-line label-primary green-back do-not-use-up">3</th>
          <th class="first-line label-primary green-back do-not-use-up">4</th>
          <th class="first-line label-primary green-back do-not-use-up">5</th>
          <th class="first-line label-primary green-back do-not-use-up">6</th>
          <th class="first-line label-primary green-back do-not-use-up">7</th>
          <th class="first-line label-primary green-back do-not-use-up">8</th>
          <th class="first-line label-primary green-back do-not-use-up">9</th>
        </tr>
      </thead>
      <tbody>
        <tr class="row">
          <td class="two-line label-primary green-back green-back-left do-not-use-left">0</td>
          <td class="two-line label-primary">0</td>
          <td class="two-line label-primary">1</td>
          <td class="two-line label-primary">4</td>
          <td class="two-line label-primary">9</td>
          <td class="two-line label-primary">16</td>
          <td class="two-line label-primary">25</td>
          <td class="two-line label-primary">36</td>
          <td class="two-line label-primary">49</td>
          <td class="two-line label-primary">64</td>
          <td class="two-line label-primary">81</td>
        </tr>
        <tr class="row">
          <td class="label-primary green-back green-back-left do-not-use-left">1</td>
          <td class="label-primary">100</td>
          <td class="label-primary">121</td>
          <td class="label-primary">144</td>
          <td class="label-primary">169</td>
          <td class="label-primary">196</td>
          <td class="label-primary">225</td>
          <td class="label-primary">256</td>
          <td class="label-primary">289</td>
          <td class="label-primary">324</td>
          <td class="label-primary">361</td>
        </tr>
        <tr class="row">
          <td class="label-primary green-back green-back-left do-not-use-left">2</td>
          <td class="label-primary">400</td>
          <td class="label-primary">441</td>
          <td class="label-primary">484</td>
          <td class="label-primary">529</td>
          <td class="label-primary">576</td>
          <td class="label-primary">625</td>
          <td class="label-primary">676</td>
          <td class="label-primary">729</td>
          <td class="label-primary">784</td>
          <td class="label-primary">841</td>
        </tr>
        <tr class="row">
          <td class="label-primary green-back green-back-left do-not-use-left">3</td>
          <td class="label-primary">900</td>
          <td class="label-primary">961</td>
          <td class="label-primary">1024</td>
          <td class="label-primary">1089</td>
          <td class="label-primary">1156</td>
          <td class="label-primary">1225</td>
          <td class="label-primary">1296</td>
          <td class="label-primary">1369</td>
          <td class="label-primary">1444</td>
          <td class="label-primary">1521</td>
        </tr>
        <tr class="row">
          <td class="label-primary green-back green-back-left do-not-use-left">4</td>
          <td class="label-primary">1600</td>
          <td class="label-primary">1681</td>
          <td class="label-primary">1764</td>
          <td class="label-primary">1849</td>
          <td class="label-primary">1936</td>
          <td class="label-primary">2025</td>
          <td class="label-primary">2116</td>
          <td class="label-primary">2209</td>
          <td class="label-primary">2304</td>
          <td class="label-primary">2401</td>
        </tr>
        <tr class="row">
          <td class="label-primary green-back green-back-left do-not-use-left">5</td>
          <td class="label-primary">2500</td>
          <td class="label-primary">2601</td>
          <td class="label-primary">2704</td>
          <td class="label-primary">2809</td>
          <td class="label-primary">2916</td>
          <td class="label-primary">3025</td>
          <td class="label-primary">3136</td>
          <td class="label-primary">3249</td>
          <td class="label-primary">3364</td>
          <td class="label-primary">3481</td>
        </tr>
        <tr class="row">
          <td class="label-primary green-back green-back-left do-not-use-left">6</td>
          <td class="label-primary">3600</td>
          <td class="label-primary">3721</td>
          <td class="label-primary">3844</td>
          <td class="label-primary">3969</td>
          <td class="label-primary">4096</td>
          <td class="label-primary">4225</td>
          <td class="label-primary">4356</td>
          <td class="label-primary">4489</td>
          <td class="label-primary">4624</td>
          <td class="label-primary">4761</td>
        </tr>
        <tr class="row">
          <td class="label-primary green-back green-back-left do-not-use-left">7</td>
          <td class="label-primary">4900</td>
          <td class="label-primary">5041</td>
          <td class="label-primary">5184</td>
          <td class="label-primary">5329</td>
          <td class="label-primary">5476</td>
          <td class="label-primary">5625</td>
          <td class="label-primary">5776</td>
          <td class="label-primary">5929</td>
          <td class="label-primary">6084</td>
          <td class="label-primary">6241</td>
        </tr>
        <tr class="row">
          <td class="label-primary green-back green-back-left do-not-use-left">8</td>
          <td class="label-primary">6400</td>
          <td class="label-primary">6561</td>
          <td class="label-primary">6724</td>
          <td class="label-primary">6889</td>
          <td class="label-primary">7056</td>
          <td class="label-primary">7225</td>
          <td class="label-primary">7396</td>
          <td class="label-primary">7569</td>
          <td class="label-primary">7744</td>
          <td class="label-primary">7921</td>
        </tr>
        <tr class="row">
          <td class="label-primary green-back green-back-left do-not-use-left">9</td>
          <td class="label-primary">8100</td>
          <td class="label-primary">8281</td>
          <td class="label-primary">8464</td>
          <td class="label-primary">8649</td>
          <td class="label-primary">8836</td>
          <td class="label-primary">9025</td>
          <td class="label-primary">9216</td>
          <td class="label-primary">9409</td>
          <td class="label-primary">9604</td>
          <td class="label-primary">9801</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="text-center">
    <span class="result-style">
                <p>
                    <span class="res-number">
                        99 <sup>2</sup>
                    </span> "=99х99="
    <span class="res-answer">9801</span>
    </p>
    </span>
  </div>
</div>

2 ответа 2

2

Вы уж извините, но ваш код я не смотрел. Он не запускается в таком виде как есть. Вот решение по вашему вопросу:

const table = document.querySelector('table');
const dummyTable = new Array(8).fill(new Array(10).fill());

const html = dummyTable.reduce((rowFragment, row) => {
  return `${rowFragment}<tr>${row.reduce((cellFragment, cell) => {
    return `${cellFragment}<td>&nbsp;</td>`;
  }, '')}</tr>`;
}, '');

table.insertAdjacentHTML('afterbegin', html);

const rows = [...table.querySelectorAll('tr')];

const highlighted = [];

table.addEventListener('mouseover', (event) => {
  const cell = event.target;
  const row = cell.closest('tr');
  const rowNumber = rows.findIndex((tr) => tr === row);
  const colNumber = [...row.querySelectorAll('td')].findIndex((td) => td === cell);

  highlighted.forEach((td) => td.classList.remove('highlight'));
  highlighted.length = 0;

  highlighted.push(...row.querySelectorAll(`td:nth-child(-n + ${colNumber})`));
  rows.filter((tr, index) => index < rowNumber).forEach((tr) => {
    highlighted.push(tr.querySelector(`td:nth-child(${colNumber + 1})`));
  });
  highlighted.push(cell);

  highlighted.forEach((td) => td.classList.add('highlight'));
});

table.addEventListener('mouseout', (event) => {
  highlighted.forEach((td) => td.classList.remove('highlight'));
  highlighted.length = 0;
});
table {
  width: 100%;
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
}

.highlight {
  background: green;
}
<table>
</table>

1

Попробовал свой вариант, как то так:

let tables = document.getElementsByClassName('table')[0];

tables.addEventListener('mouseover', function(event) {
  let cIndex = event.target.cellIndex + 1;
  let rIndex = event.target.parentNode.rowIndex;
  //console.log(cIndex);
  //console.log(rIndex);
  let getRow;
  
  if (rIndex || rIndex === 0) {  
  if (rIndex == 0) {
   getRow = document.querySelectorAll(`.table thead tr:nth-child(1) *:nth-child(-n+${cIndex})`);
  } else {
   getRow = document.querySelectorAll(`.table tbody tr:nth-child(${rIndex}) *:nth-child(-n+${cIndex})`);
  }
  
  getRow.forEach((item) => {
  item.classList.add('purple');
  });
  
   const getCol = document.querySelectorAll(`.table * tr:nth-child(-n+${rIndex}) *:nth-child(${cIndex})`);
  getCol.forEach((item) => {
  item.classList.add('purple');
  });
  }
  
});


tables.addEventListener('mouseout', function(event) {
  const gettd = document.querySelectorAll(`.table *.purple`);
  gettd.forEach((item) => {
  item.classList.remove('purple');
  });
  
  
});
body {
  background-color: #dfcdf2;
}

.resp {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.table-responsive {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: auto;
  height: auto;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  padding-top: 100px;
}

.table {
  width: auto;
  height: auto;
}

.green-back {
  color: white;
  width: 50px;
  background-color: rgb(143, 200, 0);
  font-size: 1.8em;
  font-weight: 600;
  letter-spacing: 5px;
  padding: 10px;
  padding-left: 25px;
  text-shadow: 0px 4px 3px rgb(0 0 0 / 70%), 0px 8px 13px rgb(0 0 0 / 40%), 0px 18px 23px rgb(0 0 0 / 100%);
}

.green-back-left {
  padding: 10px;
  text-align: center;
}

.label-primary {
  text-align: center;
  font-size: 30px;
  border: 1px solid #ddd;
}

.label-primary:hover {
  cursor: pointer;
}

.text-center {
  padding-top: 25px;
}

.result-style {
  text-align: center;
}

.res-number {
  color: red;
  font-size: 55px;
  font-weight: 600;
}

.res-answer {
  color: red;
  font-size: 55px;
  font-weight: 600;
}

.result-style p {
  color: green;
  font-size: 40px;
  font-weight: 400;
  }

  .purple {
    background-color:purple;
  }
<div class="table-responsive">
  <div class="resp">
    <table class="table">
      <thead>
        <tr class="row">
          <th class="first-line label-primary green-back do-not-use-up"></th>
          <th class="first-line label-primary green-back do-not-use-up">0</th>
          <th class="first-line label-primary green-back do-not-use-up">1</th>
          <th class="first-line label-primary green-back do-not-use-up">2</th>
          <th class="first-line label-primary green-back do-not-use-up">3</th>
          <th class="first-line label-primary green-back do-not-use-up">4</th>
          <th class="first-line label-primary green-back do-not-use-up">5</th>
          <th class="first-line label-primary green-back do-not-use-up">6</th>
          <th class="first-line label-primary green-back do-not-use-up">7</th>
          <th class="first-line label-primary green-back do-not-use-up">8</th>
          <th class="first-line label-primary green-back do-not-use-up">9</th>
        </tr>
      </thead>
      <tbody>
        <tr class="row">
          <td class="two-line label-primary green-back green-back-left do-not-use-left">0</td>
          <td class="two-line label-primary">0</td>
          <td class="two-line label-primary">1</td>
          <td class="two-line label-primary">4</td>
          <td class="two-line label-primary">9</td>
          <td class="two-line label-primary">16</td>
          <td class="two-line label-primary">25</td>
          <td class="two-line label-primary">36</td>
          <td class="two-line label-primary">49</td>
          <td class="two-line label-primary">64</td>
          <td class="two-line label-primary">81</td>
        </tr>
        <tr class="row">
          <td class="label-primary green-back green-back-left do-not-use-left">1</td>
          <td class="label-primary">100</td>
          <td class="label-primary">121</td>
          <td class="label-primary">144</td>
          <td class="label-primary">169</td>
          <td class="label-primary">196</td>
          <td class="label-primary">225</td>
          <td class="label-primary">256</td>
          <td class="label-primary">289</td>
          <td class="label-primary">324</td>
          <td class="label-primary">361</td>
        </tr>
        <tr class="row">
          <td class="label-primary green-back green-back-left do-not-use-left">2</td>
          <td class="label-primary">400</td>
          <td class="label-primary">441</td>
          <td class="label-primary">484</td>
          <td class="label-primary">529</td>
          <td class="label-primary">576</td>
          <td class="label-primary">625</td>
          <td class="label-primary">676</td>
          <td class="label-primary">729</td>
          <td class="label-primary">784</td>
          <td class="label-primary">841</td>
        </tr>
        <tr class="row">
          <td class="label-primary green-back green-back-left do-not-use-left">3</td>
          <td class="label-primary">900</td>
          <td class="label-primary">961</td>
          <td class="label-primary">1024</td>
          <td class="label-primary">1089</td>
          <td class="label-primary">1156</td>
          <td class="label-primary">1225</td>
          <td class="label-primary">1296</td>
          <td class="label-primary">1369</td>
          <td class="label-primary">1444</td>
          <td class="label-primary">1521</td>
        </tr>
        <tr class="row">
          <td class="label-primary green-back green-back-left do-not-use-left">4</td>
          <td class="label-primary">1600</td>
          <td class="label-primary">1681</td>
          <td class="label-primary">1764</td>
          <td class="label-primary">1849</td>
          <td class="label-primary">1936</td>
          <td class="label-primary">2025</td>
          <td class="label-primary">2116</td>
          <td class="label-primary">2209</td>
          <td class="label-primary">2304</td>
          <td class="label-primary">2401</td>
        </tr>
        <tr class="row">
          <td class="label-primary green-back green-back-left do-not-use-left">5</td>
          <td class="label-primary">2500</td>
          <td class="label-primary">2601</td>
          <td class="label-primary">2704</td>
          <td class="label-primary">2809</td>
          <td class="label-primary">2916</td>
          <td class="label-primary">3025</td>
          <td class="label-primary">3136</td>
          <td class="label-primary">3249</td>
          <td class="label-primary">3364</td>
          <td class="label-primary">3481</td>
        </tr>
        <tr class="row">
          <td class="label-primary green-back green-back-left do-not-use-left">6</td>
          <td class="label-primary">3600</td>
          <td class="label-primary">3721</td>
          <td class="label-primary">3844</td>
          <td class="label-primary">3969</td>
          <td class="label-primary">4096</td>
          <td class="label-primary">4225</td>
          <td class="label-primary">4356</td>
          <td class="label-primary">4489</td>
          <td class="label-primary">4624</td>
          <td class="label-primary">4761</td>
        </tr>
        <tr class="row">
          <td class="label-primary green-back green-back-left do-not-use-left">7</td>
          <td class="label-primary">4900</td>
          <td class="label-primary">5041</td>
          <td class="label-primary">5184</td>
          <td class="label-primary">5329</td>
          <td class="label-primary">5476</td>
          <td class="label-primary">5625</td>
          <td class="label-primary">5776</td>
          <td class="label-primary">5929</td>
          <td class="label-primary">6084</td>
          <td class="label-primary">6241</td>
        </tr>
        <tr class="row">
          <td class="label-primary green-back green-back-left do-not-use-left">8</td>
          <td class="label-primary">6400</td>
          <td class="label-primary">6561</td>
          <td class="label-primary">6724</td>
          <td class="label-primary">6889</td>
          <td class="label-primary">7056</td>
          <td class="label-primary">7225</td>
          <td class="label-primary">7396</td>
          <td class="label-primary">7569</td>
          <td class="label-primary">7744</td>
          <td class="label-primary">7921</td>
        </tr>
        <tr class="row">
          <td class="label-primary green-back green-back-left do-not-use-left">9</td>
          <td class="label-primary">8100</td>
          <td class="label-primary">8281</td>
          <td class="label-primary">8464</td>
          <td class="label-primary">8649</td>
          <td class="label-primary">8836</td>
          <td class="label-primary">9025</td>
          <td class="label-primary">9216</td>
          <td class="label-primary">9409</td>
          <td class="label-primary">9604</td>
          <td class="label-primary">9801</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="text-center">
    <span class="result-style">
                <p>
                    <span class="res-number">
                        99 <sup>2</sup>
                    </span> "=99х99="
    <span class="res-answer">9801</span>
    </p>
    </span>
  </div>
</div>

2
  • ответ полезен (+) 20 янв 2022 в 15:49
  • Спасибо, всё работает. Только немного непонятно для чего используется parentNode в 4й строке.
    – Voleidol
    21 янв 2022 в 5:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.