简单解决表格重排序后行颜色丢失问题

问题描述：后台拿到JSON数据后，调用共通组件输出数据，并对不同情况拼接输出形式，部分代码如下：

Java代码

for(var i=0;i<first;i++){
var id = $(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(i).find(‘td’).eq(16).find(‘div’).html();
$(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(i).find(‘td’).eq(15).html(“<div unselectable=’on’ class=’j-grid-cell-inner’ style=’text-align:center;’ title=”>未审批</div>”);
$(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(i).find(‘td’).attr(‘style’,’background: gold’);
//obj[id] = ‘gold’;
}
for(var i=0;i<second;i++){
var id = $(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(first+i).find(‘td’).eq(16).find(‘div’).html();
$(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(first+i).find(‘td’).eq(15).html(“<div unselectable=’on’ class=’j-grid-cell-inner’ style=’text-align:center;’ title=”><a href=’../html/overtimeStatus.html?id=”+id+”&status=0′>修改</a>/<a href=’#’>取消</a></div>”);
$(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(first+i).find(‘td’).attr(‘style’,’background: pink’);
//obj[id] = ‘pink0’;
}
for(var i=0;i<third;i++){
var id = $(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(first+second+i).find(‘td’).eq(16).find(‘div’).html();
$(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(first+second+i).find(‘td’).eq(15).html(“<div unselectable=’on’ class=’j-grid-cell-inner’ style=’text-align:center;’ title=”><a href=’../html/overtimeStatus.html?id=”+id+”&status=1′>修改</a>/<a href=’#’>取消</a></div>”);
$(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(first+second+i).find(‘td’).attr(‘style’,’background: pink’);
//obj[id] = ‘pink1’;
}
for(var i=0;i<forth;i++){
var id = $(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(first+second+i).find(‘td’).eq(16).find(‘div’).html();
$(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(first+second+third+i).find(‘td’).eq(15).html(“<div unselectable=’on’ class=’j-grid-cell-inner’ style=’text-align:center;’ title=”>实施已确认</div>”);
$(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(first+second+third+i).find(‘td’).attr(‘style’,’background: lawngreen’);
//obj[id] = ‘lawngreen’;
}

式样如下：

其中我在’当前状态’列后面还隐藏了一列，是ID，ID唯一！！！
问题是：当我点击’开始时间’、’当前状态’等头部排序后，不光颜色消退，‘当前状态’拼接的‘未审批’、‘修改/取消’也会一并消失，而且不能改共通组件（PS：我也不会改，两三千行，我又不怎么懂JS。。。），那么只能记录ID然后分别判断着色、拼接，具体怎么做，请看下面：
注：上面的所有操作都在点击事件触发前就完成了，即来自body的onload的init方法
1、定义一个对象
var obj = {};//应定义为全局变量
将ID作为key值，颜色作为value值，就是我上面注释掉的写法
2、触发click事件后首先将重排好后的ID放入数组中去

Java代码

var context;
context = new Array();
for(var i=0;i<total;i++){
var id = $(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(i).find(‘td’).eq(16).find(‘div’).html();
context.push(id);
}

3、遍历重排后的ID数组，进行比较匹配和重新着色等一些列操作
①遍历重排后的ID数组

Java代码

for(var j=0;j<context.length;j++){ }

②得到排序好后的ID在数组中的位置

Java代码

var posion = $.inArray(context[j],context);

③将数组中的ID作为obj对象的key值找到对应的value值

Java代码

if(obj[context[j]]==’gold’){
$(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(posion).find(‘td’).eq(15).html(“<div unselectable=’on’ class=’j-grid-cell-inner’ style=’text-align:center;’ title=”>未审批</div>”);
$(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(posion).find(‘td’).attr(‘style’,’background: gold’);
}else if(obj[context[j]]==’lawngreen’){
$(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(posion).find(‘td’).eq(15).html(“<div unselectable=’on’ class=’j-grid-cell-inner’ style=’text-align:center;’ title=”>实施已确认</div>”);
$(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(posion).find(‘td’).attr(‘style’,’background: lawngreen’);
}else if(obj[context[j]]==’pink0′){
$(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(posion).find(‘td’).eq(15).html(“<div unselectable=’on’ class=’j-grid-cell-inner’ style=’text-align:center;’ title=”><a href=’../html/overtimeStatus.html?id=”+context[j]+”&status=0′>修改</a>/<a href=’#’>取消</a></div>”);
$(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(posion).find(‘td’).attr(‘style’,’background: pink’);
}else if(obj[context[j]]==’pink1′){
$(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(posion).find(‘td’).eq(15).html(“<div unselectable=’on’ class=’j-grid-cell-inner’ style=’text-align:center;’ title=”><a href=’../html/overtimeStatus.html?id=”+context[j]+”&status=1′>修改</a>/<a href=’#’>取消</a></div>”);
$(‘#overtimeImplementListTable’).find(‘tbody’).eq(1).find(‘tr’).eq(posion).find(‘td’).attr(‘style’,’background: pink’);
};

4、最后在3-1的for循环结束后清空数组

Java代码

//清空数组
//obj = {};//对象不需要清空!
context.length = 0;

所采用的方法很简单初级，必定有更好的解决办法，小弟经验不足、知识狭隘，如果有好的建议或不同建议，定当虚心请教，认真学习