Сообщение от рони
|
я думал это как-то сократит код
|
Можно было бы и сократить, если бы исходник имел только то, что требуется и в нужном порядке, а далее добавлять в фрагмент ячейки, с двумя условиями: для null значений и с ключами содержащих в имени "percent", для которых classList.toggle('я красный', value < 0).
Либо имел бы JS функции подобные array_intersect_key, можно было бы отсеять "мусор", иначе сокращения не получится. )
PS. То есть, было бы хоть что-то из этого готовое, то по такому принципу:
<style>
table {
border-collapse: collapse;
}
td, th {
padding: 5px;
border: 1px solid #ddd;
}
td:nth-child(n+7) {
color: #198E01;
}
.red {
color: #B20101!important;
}
</style>
<table>
<tr>
<th>Криптовалюта</th>
<th>Курс</th>
<th>Обоъем торогов</th>
<th>Капитализация</th>
<th>Оборот</th>
<th>Максимум</th>
<th>Курс 7ч</th>
<th>Курс 24ч</th>
<th>Курс 7д</th>
</tr>
</table>
<script>
fetch('https://api.coinmarketcap.com/v1/ticker/?limit=20')
.then( (responce) => {
return responce.json();
})
.then( (data) => {
let tbl = document.querySelector('table'), key = 'name price_usd 24h_volume_usd market_cap_usd total_supply max_supply percent_change_1h percent_change_24h percent_change_7d'.split(' ');
data && data.forEach(coin => {
let tr = tbl.insertRow(-1);
Object.entries(coin).filter(function(v) {
return key.includes(v[0])
}).forEach(v => {
let td = tr.insertCell(-1);
td.textContent = v[1] || '';
td.classList.toggle('red', /^percent/.test(v[0]) && v[1]<0)
})
})
})
</script>
Но тут не в том порядке, только лишь нужное.