【go】js如何根据table里面元素的正负显示不同的颜色

问题描述

表格如下
【go】js如何根据table里面元素的正负显示不同的颜色

{{range .Data}}

<tr class="coin-tr" onmouseover="this.style.background= '#fbe8d5'"

onmouseout="this.style.background=''">

{{end}}

排行币种币名价格(美元)市值(美元)当前流通量发行总量24小时涨跌(%)24小时交易量24小时均价
{{.Rank}}{{.Symbol}}{{.Name}}{{.PriceUsd}}{{.MarketCapUsd}}{{.Supply}}{{.MaxSupply}}{{.ChangePercent24Hr}}{{.VolumeUsd24Hr}}{{.Vwap24Hr}}

需求是根据table表格里面，第8列的数字正负改变该数字的颜色显示。比如

问题出现的环境背景及自己尝试过哪些方法

后台用的是golang语言，传给前端的是一个数组，需要遍历来显示里面的元素，对js不太懂，试了好几种方法，都没成功，不知道如何查找table表格中那一列的所有元素。

相关代码

<table border="1" id="coinmarket">
<thead>
<tr>
<th>排行</th>
<th>币种</th>
<th>币名</th>
<th>价格(美元)</th>
<th>市值(美元)</th>
<th>当前流通量</th>
<th>发行总量</th>
<th>24小时涨跌(%)</th>
<th>24小时交易量</th>
<th>24小时均价</th>
</tr>
</thead>
<tbody>
{{range .Data}}
<tr class="coin-tr" onmouseover="this.style.background= '#fbe8d5'"
onmouseout="this.style.background=''">
<td class="coin-td">{{.Rank}}</td>
<td id="symbol">{{.Symbol}}</td>
<td>{{.Name}}</td>
<td>{{.PriceUsd}}</td>
<td>{{.MarketCapUsd}}</td>
<td>{{.Supply}}</td>
<td>{{.MaxSupply}}</td>
<td id="changePercent" class="change">{{.ChangePercent24Hr}}</td>
<td>{{.VolumeUsd24Hr}}</td>
<td>{{.Vwap24Hr}}</td>
</tr>
{{end}}
</tbody>
</table>

希望24小时涨跌这一列的正数都显示红色，负数都显示绿色。

对js不太懂，试了好几种方法都不成功，在这里求大神指导下，不胜感激，谢谢谢谢！

回答

需要jQyery js库

$(function(){
    $('.change').each(function(i){
        var colorStr = ''; 
        $('.change').eq(i).html()>0 ?  colorStr = 'red' : 'green';
        $('.change').eq(i).css('color',colorStr );
    });
})
$('.change').each(function(i){
    var colorStr = ''; 
    $('.change').eq(i).html()>0 ?  colorStr = 'red' : 'green';
    $('.change').eq(i).css('color',colorStr );
});

不懂golang的渲染语法，不过既然能正常渲染数据，应该也能进行判断吧！

渲染时，判断.ChangePercent24Hr的正负，给td不同的class

<td id="changePercent" class="{{ .ChangePercent24Hr > 0 : 'positive' : 'negative' }}">{{.ChangePercent24Hr}}</td>

样式：

.positive {
    color: #fb3d3d; // 正的为红色
}
.negative {
    color: #04be02; // 负的为绿色
}

以上是 【go】js如何根据table里面元素的正负显示不同的颜色 的全部内容， 来源链接： utcz.com/a/108552.html

回到顶部