Question

我在视图中有表格，我用JS代码填充。我需要更改<td class="speed">多td class="speedlimit">的所有值的颜色。我怎么能通过JS做到这一点？

for (i = 0; i < speeddata.length; i++) {
  $('#speeddata').append('<tr>' + '<td class="imei">' + speeddata[i].Imei + '</td>' +
    '<td class="lat">' + speeddata[i].Latitude2 + '</td>' +
    '<td class="lng">' + speeddata[i].Longitude2 + '</td>' +
    '<td class="speed">' + speeddata[i].Speed + '</td>' +
    '<td class="speedlimit">' + speeddata[i].speedlimits + '</td>' + '</tr>');
}

<table id="speedlimitTable" class="table table-striped cell-border">
  <thead>
    <tr>
      <th class="text-center">Imei</th>
      <th class="text-center">Latitude</th>
      <th class="text-center">Longitude</th>
      <th class="text-center">Speed</th>
      <th class="text-center">Speed Limit</th>
    </tr>
  </thead>
  <tbody id="speeddata" style="overflow-y:scroll" class="text-center"></tbody>
</table>

Answer 1

您可以通过以下代码实现：

在添加tr之前检查速度和速度限制。当速度超过速度限制时，我增加了“危险”等级。

for (i = 0; i < speeddata.length; i++) 
{
    if(speeddata[i].Speed > speeddata[i].speedlimits)
    {
        $('#speeddata').append('<tr>' + '<td class="imei">' + speeddata[i].Imei + '</td>' +
            '<td class="lat">' + speeddata[i].Latitude2 + '</td>' +
            '<td class="lng">' + speeddata[i].Longitude2 + '</td>' +
            '<td class="speed danger">' + speeddata[i].Speed + '</td>' +
            '<td class="speedlimit">' + speeddata[i].speedlimits + '</td>' + '</tr>');
    }
    else
    {
            $('#speeddata').append('<tr>' + '<td class="imei">' + speeddata[i].Imei + '</td>' +
            '<td class="lat">' + speeddata[i].Latitude2 + '</td>' +
            '<td class="lng">' + speeddata[i].Longitude2 + '</td>' +
            '<td class="speed">' + speeddata[i].Speed + '</td>' +
            '<td class="speedlimit">' + speeddata[i].speedlimits + '</td>' + '</tr>');
    }
}

使用三元opertor实现此目的的另一种方法：

var speedlimitexceed = (speeddata[i].Speed > speeddata[i].speedlimits) ? "danger" : "";


for (i = 0; i < speeddata.length; i++) 
{
        $('#speeddata').append('<tr' + speedlimitexceed + '<td class="imei">' + speeddata[i].Imei + '</td>' +
            '<td class="lat">' + speeddata[i].Latitude2 + '</td>' +
            '<td class="lng">' + speeddata[i].Longitude2 + '</td>' +
            '<td class="speed danger">' + speeddata[i].Speed + '</td>' +
            '<td class="speedlimit">' + speeddata[i].speedlimits + '</td>' + '</tr>');

}

Answer 2

您可以使用ternary operator并使用某些css配置设置Generate类：

<tr>

var speeddata = [
  { Imei: 'test1', Latitude2 : 100, Longitude2 : 200, Speed: 300, speedlimits: 300 },
  { Imei: 'test2',  Latitude2 : 110, Longitude2 : 210, Speed: 310, speedlimits: 300 },
  { Imei: 'test3',  Latitude2 : 170, Longitude2 : 250, Speed: 310, speedlimits: 340 },
]

for (i = 0; i < speeddata.length; i++) {
  $('#speeddata').append('<tr' +
  (speeddata[i].Speed > speeddata[i].speedlimits ? ' class="bigger" ' : '') +
  '><td class="imei">' + speeddata[i].Imei + '</td>' +
    '<td class="lat">' + speeddata[i].Latitude2 + '</td>' +
    '<td class="lng">' + speeddata[i].Longitude2 + '</td>' +
    '<td class="speed">' + speeddata[i].Speed + '</td>' +
    '<td class="speedlimit">' + speeddata[i].speedlimits + '</td>' + '</tr>');
}

.bigger{
  background-color: red;
}

另一个选项（取决于具体情况）是在<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="speedlimitTable" class="table table-striped cell-border"> <thead> <tr> <th class="text-center">Imei</th> <th class="text-center">Latitude</th> <th class="text-center">Longitude</th> <th class="text-center">Speed</th> <th class="text-center">Speed Limit</th> </tr> </thead> <tbody id="speeddata" style="overflow-y:scroll" class="text-center"></tbody> </table>上使用.each()和.addClass()创建后，搜索您想要的<td>。

要获取指定的<tr>，您可以使用.find()：

<td>

甚至.children()：

$('#speeddata').find('tr').each(function(){
  if(($(this).find('td.speed').text()) > ($(this).find('td.speedlimit').text())){
    $(this).addClass('bigger');
  }
});

注意：要设置$('#speeddata').children('tr').each(function(){ if(($(this).children('td.speed').text()) > ($(this).children('td.speedlimit').text())){ $(this).addClass('bigger'); } });课程，您也可以使用.attr('class', 'bigger')，但它会删除所有其他课程。

更改表格中文本的颜色

2 个答案: