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

Question

问题描述

表格如下

{{range .Data}} <tr class="coin-tr" onmouseover="this.style.background= '#fbe8d5'" style="cursor: pointer" 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'" style="cursor: pointer"
                        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不太懂，试了好几种方法都不成功，在这里求大神指导下，不胜感激，谢谢谢谢！

Answer 1

需要jQyery js库

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

Answer 2

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

Answer 3

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

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

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

样式：

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