1

Есть таблица, имеющая 4 столбца. Есть скрипт, меняющий высоту div в зависимости от значения в ячейках. Каким образом можно связать определённую ячейку с определённым div? В таком варианте, div наследуют значения ячеек по порядку. Например: второй div принимает значение второй ячейки (0.8), которая является второй ячейкой первой строки, а нужно чтобы принимал значение третей ячейки (1), которая является первым значением второй строки. Проще говоря, первые четыре div должны принять по первому значению (1, 1, 1, 1) каждой строки таблицы, а вторая четвёрка div должна принять по второму значению (0.8, 0.6, 0.4, 0.2) каждой строки. Спасибо!

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
window.addEventListener('DOMContentLoaded', function() {
var td = document.querySelectorAll('.ratio-table td'), div = document.querySelectorAll('.item');
[].forEach.call(td, function(el,i) {
       var height =  el.textContent * 100 + "%";
       div[i].style.height = height ;
});
    });
  </script>
</head>

<body>
<table class="ratio-table">
  <tr>
    <td>1</td>
    <td>0.8</td>
  </tr>
  <tr>
    <td>1</td>
    <td>0.6</td>
  </tr>
  <tr>
    <td>1</td>
    <td>0.4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>0.2</td>
  </tr>
</table>
<div class="container" style="width: 100%; height: 300px;" >
  <div class="item" style="width: 50px; height: 100%; background: orange; display: inline-block;"></div>
  <div class="item" style="width: 50px; height: 100%; background: orange; display: inline-block;"></div>
  <div class="item" style="width: 50px; height: 100%; background: orange; display: inline-block;"></div>
  <div class="item" style="width: 50px; height: 100%; background: orange; display: inline-block;"></div>
  <div class="item" style="width: 50px; height: 100%; background: orange; display: inline-block;"></div>
  <div class="item" style="width: 50px; height: 100%; background: orange; display: inline-block;"></div>
  <div class="item" style="width: 50px; height: 100%; background: orange; display: inline-block;"></div>
  <div class="item" style="width: 50px; height: 100%; background: orange; display: inline-block;"></div>
</div>

</body>
</html>

1 ответ 1

1

window.addEventListener('DOMContentLoaded', () => {
  let table  = document.querySelector('.ratio-table'), 
      divs   = document.querySelectorAll('.item'), 
      divIdx = 0; 
  const setNextDivHeight = h => divs[divIdx++].style.height = h * 100 + '%'; 
  getTableColValues(table, 1).forEach(setNextDivHeight);    // нумерация с 1, так как выбираем ячейки через :nth-child
  getTableColValues(table, 2).forEach(setNextDivHeight);    // когда столбцов >2, уместен цикл
});

function getTableColValues(table, colIdx) {
  return Array.prototype.map.call(
    table.querySelectorAll(`tr td:nth-child(${colIdx})`), 
    td => td.textContent
  ); 
}
.container { width: 100%; height: 300px; }

.item {
  display: inline-block;
  width: 50px; height: 100%; 
  background: orange; 
}
<table class="ratio-table">
  <thead></thead>
  <tbody>
    <tr><td>1</td><td>0.8</td></tr>
    <tr><td>1</td><td>0.6</td></tr>
    <tr><td>1</td><td>0.4</td></tr>
    <tr><td>1</td><td>0.2</td></tr>
  </tbody>
</table>

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Проверки тут не добавлены, т.к. это пример, и мы знаем что количества td и div нам точно хватит. В реальном коде, это необходимо проверять - иначе скрипт может падать с исключением.
(выборка значений, когда td в столбце нет - вернет пустой массив, с этим все ОК... разве что присвоится инлайн-стиль 'height: NaN%'. А вот при попытке назначить style для div вне диапазона коллекции, будет выброшено TypeError)

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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