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";
    }

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

段：

＆＃13;

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");
    }
}

＆＃13;

@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; }

＆＃13;

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

＆＃13;

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'
    }
  })

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

1 个答案: