Связать значение ячеек таблицы с div Javascript

311

26 апреля 2018, 10:07

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

Answer 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)

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Обработка массива обьектов

Как можно обработать массив обьектов, чтобы суммировать все поля сost (из Detail) со статусами true при совпадении свойства country? Спасибо!

286

javascript

Простое регулярное выражение на javascript [требует правки]

Можно, пожалуйста, пример регулярки на js, jQuery, например, для текста [A-Za-z]+На php это очень легко делать, а с js что-то не как не поймиу что куда (

210

javascript

Проблема определением наличия слова

Есть переменная val с содержимым 285 кривой или ровный %Как определить имеется ли слово в переменной val?

262

javascript

кластеризация маркеров в GoogleMap

Не понимаю как реализовать кластеризацию маркеров в данном случаеПомогите исправить ошибки и правильно реализовать эту функцию

233