Есть таблица, имеющая 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>