EXTJS/HTML - 動態改變html表格單元格的顏色

Question

我使用XTemplate中的html表格創建一個heatmap。表格列和行是動態的，並且是從JSON數據驅動的。 JSON響應還將包含一個屬性來指示單元格的顏色。

如何獲取顏色值並相應地實施UI更改？

this.tpl = new Ext.XTemplate(
    "<table border='1' style='width:100%'>" + 
     "<tr>" + 
      "<tpl for='.'>"+ 
       "<th style='color:white;'>{COLUMN_NAME}</th>" + 
      "</tpl>" + 
     "</tr>"+ 
     "<tr>" + 
      "<tpl for='.'>"+ 
       "<td align='center' style='color:white;'>{VALUE}</td>" + 
      "</tpl>"+ 
     "</tr>"+ 
    "</table>" 
    ); 

我不知道什麼樣的數據這個地圖會因此下面展示的是一個存根JSON

JSON樣本數據：

{ "data":[{"COLUMN_NAME":"ColumnA", "VALUE":"HIGH", "COLOR":"Red"},{"COLUMN_NAME":"ColumnB", "VALUE":"LOW", "COLOR":"Green"}]} 

TY

Answer 1

繼適用說文字的顏色。這會工作嗎？

<th style='color:{COLOR};'>{COLUMN_NAME}</th>