javascript - 更改与值相关的颜色

Question

我有从后端填充的表值

这是执行此操作的 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);
          }
      }
  })
}

效果很好。

但是需要在航类检查这个值

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

如果是“拒绝”，请将文本颜色更改为红色。

我怎样才能正确地做到这一点？

感谢您的帮助。

Answer 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 遍才能检查报价是否正确。