更改与值相关的颜色

时间:2018-05-03 17:52:33

标签: javascript jquery

我从后端填充了表值

这是执行此操作的js函数。

function AllProposals() {
  let getProposalsUrl = '/proposals/index';
  $.ajax({
      url: getProposalsUrl,
      contentType: 'application/json; charset=utf-8',
      type: 'GET',
      dataType: 'json',
      processData: false,
      success: function (data) {
          $("#proposals").empty();
          var list = data;
          for (var i = 0; i <= list.length - 1; i++) {
              var tableData = '<tr>' +
                  '<td class="proposalId">' +
                  list[i].Id +
                  '</td>' +
                  '<td > ' +
                  list[i].Project +
                  '</td>' +
                  '<td > ' +
                  moment(list[i].DateFrom).format('DD/MM/YYYY') + "--" + moment(list[i].DateTo).format('DD/MM/YYYY') +
                  '</td>' +
                  '<td> ' +
                  list[i].WorkTime + "--" +list[i].WorkTimeTo +
                  '</td>' +
                  '<td > ' +
                  list[i].Quantity+
                  '</td>' +
                  '<td> ' +
                  list[i].Service +
                  '</td>' +
                  '<td> ' +
                  list[i].Price +
                  '</td>' +
                  '<td> ' +
                  list[i].Status +
                  '</td>' +

                  '</tr>';
              $('#proposals').append(tableData);
          }
      }
  })
}

效果很好。

Bu需要在航班上检查此值

'<td> '+list[i].Status+'</td>' +

如果是&#34;被拒绝&#34;将文字颜色改为红色。

我如何正确地做到这一点?

感谢您的帮助。

3 个答案:

答案 0 :(得分:1)

您可以使用开关获取状态并根据获得的颜色设置颜色,并将其传递给变量。

示例

audio_source = audio_helpers.WaveSource(
        open(input_audio_file, 'rb'),
        sample_rate=audio_sample_rate,
        sample_width=audio_sample_width
# ...
# Create conversation stream with the 
# given audio source and sink.
conversation_stream = audio_helpers.ConversationStream(
    source=audio_source,
    sink=audio_sink,
    iter_size=audio_iter_size,
    sample_width=audio_sample_width,
)
# ...
with SampleAssistant(lang, device_model_id, device_id,
                     conversation_stream,
                     grpc_channel, grpc_deadline,
                     device_handler) as assistant:
    # If file arguments are supplied:
    # exit after the first turn of the conversation.
    if input_audio_file or output_audio_file:
        assistant.assist()
        return

答案 1 :(得分:1)

如果你需要重用ajax调用的返回数据,假设这个代码需要一些重构,一般情况下它不好看,我会这样做:

          '<td'+ (list[i].Status == 'Rejected' ? ' style="color:red;"' : '') +'> ' +
          list[i].Status +
          '</td>' +

修改
如果将来你需要根据list[i].Status的内容分配不同的颜色,我建议创建一个内容到颜色的查找表:

let contentToColor = {
    "Rejected": "red",
    "Success": "green",
    "Warning": "yellow"
};

然后:

      '<td'+ (contentToColor[list[i].Status] !== 'undefined' ? ' style="color: '+ contentToColor[list[i].Status] +';"' : '') +'> ' +
      list[i].Status +
      '</td>' +


检查变量是否存在的方法可能是错误的,我不记得它是如何在JS中完成的,但是你得到了这个概念。

无论如何,我建议通过分离表示代码和域代码来重构代码。你将通过我上面写的丑陋代码来拯救自己。我必须阅读10次才能检查报价是否合适。

答案 2 :(得分:0)

您可以使用jQuery的.attr方法(http://api.jquery.com/attr/

来改变style属性
if(status=="rejected"){
  $(.elementclass).attr("style","color:red");
}