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

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

				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+third+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放入数组中去

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数组

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

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

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

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

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循环结束后清空数组

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

最后，其原理其实很简单，如下：

var x = {};
x[1] = '黑';
x[3] = '白';
x[2] = '黑';
//var x = {1:'黑',3:'白',2:'黑'};
var newX;
newX.push(3);
newX.push(1);
newX.push(2);
//newX = [3,1,2];
for(var i=0;i<newX.length;i++){
$.inArray(newX[i],newX)//找到指定值在数组中的位置
	alert(newX[i]+"="+x[newX[i]]);//3=白;1=黑;2=白
}

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