Изменить размер div от значения в таблице
Здравствуйте!
Есть простая таблица, в ячейках которой есть данные от 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%. Спасибо! |
document.querySelectorAll('.item').forEach((el, i)=> el.style.height = document.querySelectorAll('.ratio-table td')[i].textContent * 100 +"%");
в тот же обработчик (функцию) которая меняет td |
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>
|
рони,
:p |
j0hnik,
:) |
Огромное спасибо!
|
Простите, а как связать конкретную ячейку с конкретным блоком?
У меня четыре столбца таблицы с данными:
<!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" берёт значения из второй по счёту ячейки, а нужно, чтобы брал из первой ячейки второго столбца, которая по счёту третья. |
<!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). |
Вы меня спасли! Снимаю шляпу!
|
:-? не осилил ни вопроса, ни ответа
|
| Часовой пояс GMT +3, время: 08:51. |