Форум

stasnislav · #1 (**permalink**) 30.03.2018, 19:35

Здравствуйте!
Есть простая таблица, в ячейках которой есть данные от 0.01 до 1.00.

<table class="ratio-table">
  <tr>
    <td data-id="1">1</td>
    <td data-id="2">0.5</td>
  </tr>
</table>

Чуть ниже которой есть несколько блоков, имеющие высоту в % от родителя.

<div class="container" style="width: 100%; height: 300px;" >
   <div class="item" data-id="1" style="width: 50px; height: 100%; background: orange; display: inline-block;"></div>
   <div class="item" data-id="2" style="width: 50px; height: 100%; background: orange; display: inline-block;"></div>
</div>

Скажите пожалуйста, как с помощью javascript изменить высоту блоков "item" в зависимости от значения в ячейках таблицы?
Например, значение в ячейке изменилось с 1.0 до 0.5 - блок уменьшил свою высоту на 50%.

Спасибо!

j0hnik · #2 (**permalink**) 30.03.2018, 19:47

document.querySelectorAll('.item').forEach((el, i)=> el.style.height = document.querySelectorAll('.ratio-table td')[i].textContent * 100 +"%");

в тот же обработчик (функцию) которая меняет td

рони · #3 (**permalink**) 30.03.2018, 19:47

stasnislav,

<!DOCTYPE html>

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

  <script>
window.addEventListener('DOMContentLoaded', function() {
var td = document.querySelectorAll('td[data-id]'), 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 data-id="1">1</td>
    <td data-id="2">0.5</td>
  </tr>
</table>
<div class="container" style="width: 100%; height: 300px;" >
  <div class="item" data-id="1" style="width: 50px; height: 100%; background: orange; display: inline-block;"></div>
  <div class="item" data-id="2" style="width: 50px; height: 100%; background: orange; display: inline-block;"></div>
</div>


</body>
</html>

j0hnik · #4 (**permalink**) 30.03.2018, 19:48

рони,

рони · #5 (**permalink**) 30.03.2018, 19:51

j0hnik,

stasnislav · #6 (**permalink**) 30.03.2018, 20:00

Огромное спасибо!

stasnislav · #7 (**permalink**) 25.04.2018, 03:08

Простите, а как связать конкретную ячейку с конкретным блоком?
У меня четыре столбца таблицы с данными:

<!DOCTYPE html>
 
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
 
  <script>
window.addEventListener('DOMContentLoaded', function() {
var td = document.querySelectorAll('td[data-id]'), 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>

С предложенным "data-id" атрибутом блоки получают значения из таблицы по порядку. То есть, второй div "item" берёт значения из второй по счёту ячейки, а нужно, чтобы брал из первой ячейки второго столбца, которая по счёту третья.

j0hnik · #8 (**permalink**) 25.04.2018, 04:01

<!DOCTYPE html>
 
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
 
  <script>
window.addEventListener('DOMContentLoaded', function() {
var td = [...document.querySelectorAll('td[data-id]')].sort((a,b)=>a.dataset.id-b.dataset.id), 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 data-id='1'>1</td>
    <td data-id='0'>0.8</td>
  </tr>
  <tr>
    <td data-id='7'>1</td>
    <td data-id='5'>0.6</td>
  </tr>
  <tr>
    <td data-id='2'>1</td>
    <td data-id='6'>0.4</td>
  </tr>
  <tr>
    <td data-id='6'>1</td>
    <td data-id='4'>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>

data-id -номер блока (отсчет от 0).

stasnislav · #9 (**permalink**) 25.04.2018, 04:11

Вы меня спасли! Снимаю шляпу!

рони · #10 (**permalink**) 25.04.2018, 04:28

не осилил ни вопроса, ни ответа

Форум

Справочник

Discord чат

Курсы javascript