实现表元内容分段信息，不同分段不同颜色

效果如图：

截图201912192000384773.png (34.21 KB, 下载次数: )

下载附件

2019-12-19 20:00 上传

需求为： 文字内容为数据库浮动  分段用-分割，（1/4）分段后的分子分母 来判断每个分段文字颜色
分子<>分母绿色；分子为0 红色 ； 分子等于分母 黄色
实现脚本如下：
//浮动表元  GRID2.A2$
var fd=<#=GRID2.A2$#>;
var aa;
var  cellArray;
/**
        设置需要设置的列的表元文字
        cellId：表格名.列
        titleRow：标题行行数
**/

function  setCells(cellId,titleRow){
        for(var i=0;i<fd.length;i++){
                cellArray=$("[id='"+cellId+(i+1+titleRow)+"'] > span").html().split('-');
                //设置每个单元的css
                setHtml(cellArray,cellId,titleRow,i);
        }
}

/**
        方法用来设置每个表元内容 各文字分段颜色
        cellArray：表元文字用-分割做数组
        cellId：传递 表格.列  
        titleRow:标题行
        num:传递表元数组下标
**/
function setHtml(cellArray,cellId,titleRow,num){
var fdHtml='';
for(var i=0;i<cellArray.length;i++){
//分子分母位置
var s1=cellArray.indexOf("\(");
var s2=cellArray.indexOf("\/");
var s3=cellArray.indexOf("\)");
//分子分母的值
var fz=cellArray.substr(s1+1,s2-s1-1);
var fm=cellArray.substr(s2+1,s3-s2-1);

if(fz!=fm&&fz!=0){
  fdHtml+='<font color="lightgreen">'+cellArray+'</font>';
}else if(fz==0){
  fdHtml+='<font color="red">'+cellArray+'</font>';
}else if(fz==fm){
  fdHtml+='<font color="orange">'+cellArray+'</font>';
}
if(i!=cellArray.length-1){
  fdHtml+='-';
}
}
$("[id='"+cellId+(num+1+titleRow)+"'] > span").html(fdHtml);
}


/**
        第一个变量：表格名.列（需要设置的表格列）
        第二个变量：标题行行数
**/
setCells('GRID2.B',1);