Цитата:
Сообщение от laimas
зачем два имени класса, если ячейка может иметь один из двух цветов.
|
Вы можете указать вместо цвета (
числа на самом деле
не имеют свойства цвета!)
знак числа, что более грамотно с точки зрения математики. В стилях вы сможете тогда более интересные вещи сделать.
#market-data td[data-sign="1"] {
color: #198E01;
}
#market-data td[data-sign="-1"] {
color: #B20101;
}
Цитата:
Сообщение от laimas
Значит определить этим ячейкам сразу зеленый цвет - nth-child(exp)
|
Это ограничивает перестановку столбиков!
Цитата:
Сообщение от laimas
<tr>
<th>Криптовалюта</th>
<th>Курс</th>
<th>Обоъем торогов</th>
|
Цитата:
Сообщение от laimas
key = 'name price_usd 24h_volume_usd
|
Вместо того, чтобы объявлять отдельно столбики и связанные с ними ключи, вы можете указать в атрибуте соответствующий ключ, что
позволяет легко менять столбики местами.
<tr>
<th data-key="rank">№</th>
<th data-key="name">Криптовалюта</th>
<th data-key="price_usd">Курс</th>
Мы можем в таком случае
получать массив с нужными ключами в нужном порядке!
Цитата:
Сообщение от laimas
Можно было бы и сократить, если бы исходник имел только то, что требуется и в нужном порядке
|
Разве исходник нельзя обработать программно? Если у вас есть массив с нужными ключами в нужном порядке, то вы можете
применить функцию map, чтобы отобразить ключи на значения соответствующие этим ключам. Меня удивило, что вы споткнулись на этом!
Неужели увлечение PHP так пагубно влияет? Чтобы не мозг не закостенел от PHP, используйте хотя бы иногда Java, C#, Python, или ещё какой язык, и даже JavaScript пойдёт, ведь есть всё-таки node.js! Язык суть средство записи, в первую очередь важно изучать алгоритмы.
Цитата:
Сообщение от laimas
было бы хоть что-то из этого готовое
|
Всё что нужно, уже есть, вот проверьте...
DVV, вот вам код, в котором нет
null и столбики вы можете легко менять!
<style>
table#market-data {
border-collapse: collapse;
}
#market-data td,
#market-data th {
padding: 5px;
border: 1px solid #ddd;
}
#market-data td[data-sign="1"] {
color: #198E01;
}
#market-data td[data-sign="-1"] {
color: #B20101;
}
</style>
<table id="market-data">
<thead>
<tr>
<th data-key="rank">№</th>
<th data-key="name">Криптовалюта</th>
<th data-key="price_usd">Курс</th>
<th data-key="24h_volume_usd">Объём торгов</th>
<th data-key="market_cap_usd">Капитализация</th>
<th data-key="total_supply">Оборот</th>
<th data-key="max_supply">Максимум</th>
<th data-key="percent_change_1h">Курс 7ч</th>
<th data-key="percent_change_24h">Курс 24ч</th>
<th data-key="percent_change_7d">Курс 7д</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
function exchangeDataShow() {
fetch('https://api.coinmarketcap.com/v1/ticker/?limit=20')
.then(response => response.json())
.then(data => {
const table = document.getElementById("market-data")
const keys = Array.from(table.tHead.rows[0].cells, cell => cell.dataset.key)
const tBody = table.tBodies[0]
tBody.textContent = ""
for (const datum of data) {
const row = tBody.insertRow()
for (const key of keys) {
const cell = row.insertCell()
const value = datum[key]
cell.textContent = value == null ? "" : value
if (/^percent/.test(key))
cell.dataset.sign = Math.sign(value)
}
}
})
}
setInterval(window.onload = exchangeDataShow, 5000)
</script>
ЕЩЁ DVV, слово означающее ответ от сервера по английский пишется как response, laimas, слово объём пишется именно как объём. А вы думали, я не нацист!
