Показать сообщение отдельно
  #26 (permalink)  
Старый 26.10.2019, 12:31
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от рони
я думал это как-то сократит код
Можно было бы и сократить, если бы исходник имел только то, что требуется и в нужном порядке, а далее добавлять в фрагмент ячейки, с двумя условиями: для 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>


Но тут не в том порядке, только лишь нужное.

Последний раз редактировалось laimas, 26.10.2019 в 13:08.
Ответить с цитированием