JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<table id="dg" title="Formatting Columns" class="easyui-datagrid" style="width:550px;height:250px"
singleSelect="true" iconCls="icon-save">
<thead>
<tr>
<th field="estatus" width="90" rowspan="2">Estatus</th>
<th field="Orden" width="90" rowspan="2">Orden</th>
<th field="Fecha" width="90" align="center" rowspan="2" >Fecha</th>
<th field="T1" width="90" align="center">00:02:00</th>
<th field="T2" width="90">00:24:00</th>
<th field="T3" width="90" align="center">00:04:00</th>
<th field="T4" width="90" align="center">02:00:00</th>
<th field="Cierre" width="90" rowspan="2" align="center">Fecha Cierre</th>
</tr>
<tr>
<th field="P1" width="90" align="center" styler="formatPrice">Informacion</th>
<th field="P2" width="90" align="center" styler="formatPrice">Aprobacion</th>
<th field="P3" width="90" align="center" styler="formatPrice">Tecnica</th>
<th field="P4" width="90" align="center" styler="formatPrice">Compra</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>2</td>
<td>2015-09-26 19:13:27</td>
<td>00:48:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>3</td>
<td>2015-09-26 19:13:27</td>
<td>00:01:00</td>
<td>00:23:00</td>
<td>00:05:00</td>
<td></td>
...
JavaScript
function formatPrice(val,row,lol){
var col = "";
for(var name in row){
col = "";
var value = row[name];
if(value === val){
col = name;
}
if(col !=="" && val!==""){
var opts = $('#dg').datagrid('getColumnOption',col);
var pr =opts["field"].substring(1);
var opts2 = $('#dg').datagrid('getColumnOption', 'T'+pr);
var time = opts2["title"];
if(val >= time){
return 'background-color:#ff0000;color:white;';
}
else{
return 'background-color:#00ff00;color:white;';
}
}
}
return val;
}