如果javascript中的数字为正，则更改文本颜色

Question

我正在使用 javascript 从 JSON 加载数据。 我设法将所有内容加载到表中。 对于一列，如果数字为正，我希望 CSS 颜色更改为绿色。 否则，我希望颜色为红色。 在搜索了一些问题之后，我尝试了下面的代码，尽管 id 是 100% 正确的（它是一个 ID 而不是一个类），但它并没有改变颜色。 我的 CSS 中也没有!important行：

var resultEl = document.getElementById('highlight');


    var resultVal = platform_data[i][3];
    resultEl.innerHTML = Number(resultVal);
    if (resultVal > 0) 
    {
        resultEl.style.color = "#99c63a!important";
    } else 
    {
        resultEl.style.color = "#c63a3a!important";
    }

我期待上述工作，我没有在控制台中收到任何错误。 我什至尝试从script删除!important标签。

片段：

 var json_data = {"headers":["tt","tt","tt","tt","ttt","tt"],"rows":[["v2",226026.36999998972,221971.99999999144,0.01826523165083179,2407556.1300007524,514000],["v1",201656.91999999149,null,"NaN",272595.8799999832,323000],[" v3",185949.95999999763,173707.60999999757,0.07047676264730277,1896453.7399997683,434000],["v4",6889.369999999999,null,"NaN",6889.369999999999,null]]} var platform_data = json_data.rows; var table = '<thead><tr><th><h1>AAA</h1></th><th><h1>BBBB</h1></th><th><h1>CCCC</h1></th><th><h1>DDDD</h1></th><th><h1>EEEE</h1></th><th><h1>FFFF</h1></th></tr></thead><tbody>'; for (var i in platform_data) { table+='<tr>' + '<td>' + platform_data[i][0] + '</td>' + '<td>$' + platform_data[i][1].toFixed(2) + '</td>' + '<td>$' + (platform_data[i][2] || 0).toFixed(2) + '</td>' + '<td class="highlight">' + (parseFloat(platform_data[i][3])*100).toFixed(2) + '%</td>' + '<td>$'+ platform_data[i][4].toFixed(2) +'</td>'+ '<td>$'+ (platform_data[i][5] || 0).toFixed(2) +'</td>'+'</tr>'; } table+= '</tbody>'; document.getElementById("dynamic_table").innerHTML = table; for (var i in platform_data) { var resultEl = document.getElementsByClassName("highlight")[i]; var resultVal = Number(platform_data[i][3]); console.log(resultEl.innerHTML); if (resultVal > 0) { resultEl.style.color = "#99c63a"; console.log("green"); } else { resultEl.style.color = "#c63a3a"; console.log("red"); } }

 @charset "UTF-8"; @import url('https://fonts.googleapis.com/css?family=Roboto'); body { overflow:hidden; font-family: 'Roboto', sans-serif; font-weight: 300; line-height: 1.42em; color:#454545; text-transform:capitalize; background:#99C63A url('http://www.fitfactoryma.com/FitFactory/media/SiteResources/redesign/join-now.jpg'); } #dynamic_table th h1 { font-weight: bold; font-size: 1em; text-align: left; color: #454545; } #dynamic_table td { font-weight: normal; font-size: 1em; -webkit-box-shadow: 0 2px 2px -2px #99C63A; -moz-box-shadow: 0 2px 2px -2px #99C63A; box-shadow: 0 2px 2px -2px #99C63A; } #dynamic_table { text-align: left; overflow: hidden; width: 99%; margin: 0 auto; display: table; padding: 0 0 8em 0; } #dynamic_table td, #dynamic_table th { padding-bottom: 2%; padding-top: 2%; padding-left:2%; } /* Background-color of the odd rows */ #dynamic_table tr:nth-child(odd) { background-color: #fff; } /* Background-color of the even rows */ #dynamic_table tr:nth-child(even) { background-color: #fff; } #dynamic_table th { background-color: #f1f1f1; } #dynamic_table td:first-child { color: #99C63A; }

 <table id="dynamic_table"></table>

UPD：我必须为class而不是id制作代码。 我已经更新了片段。

Answer 1

您在表变量中添加<td class="highlight">

但是通过 id 获取元素

var resultEl = document.getElementById('highlight')

只需遍历亮点类

[]
  .slice
  .call(document.querySelectorAll('.highlight'))
  .forEach(function (el) {
    // check value here
    var elValue = el.textContent.replace('%', '')
    if (Number(elValue) > 0) {
      el.style.color = 'red'
    } else {
      el.style.color = 'blue'
    }
  })