jQuery动态处理table

工作中有时候会写一些小工具，web端主要用html、css、jQuery来写的。因为vue呀nodejs呀不会~下面就记录下我用到的一些操作。首先描述下后端返回的数据格式{keys1:{key1:value1-1，key2:value1-2...},keys2:{key1:value2-1,key2:value2-2....}},其中key值是相同的,所要实现的效果类似于这样,然后对比某一列的值是否相等，如果不相等，更改某一列的背景颜色（表里只改了下文字颜色~）。

数据	key1	key2	key3
keys1	value1	value1-2	value1-3
keys2	value2-1	value2-2	value2-3

1.动态添加thead

由于ajax请求后端，后端返回的是json对象，将json对象的key作为thead添加到table中

            $('#tHead').append('<tr><th>'+'数据'+'</tr></th>');
        	//增加表头，由于key值是一样的，只需增加一次就可以
            for(var o in data){
            	var res=data[o];
            	for(var info in res){
            		//console.log(res[info]);
            		$col = $('<th>' +info+ '</th>');
            		$('#tHead tr:eq(0)').append($col);
            	}
            	break;
            }

2.动态添加tbody

其实和添加thead类似，直接看代码

            var i=0;
            for(var o in data){	
            	var res=data[o];
            	$('#tBody').append('<tr><td>'+o+'</tr></td>');
            	for(var info in res){
            		//console.log(res[info]);
            		$col = $('<td>' +res[info]+ '</td>');
            		$('#tBody tr:eq('+i+')').append($col);
            	}
            	i++;
            }

3.表格生成完之后对比所有列的值，如果值不相等更改当前列的背景颜色

    var columnNum=$("#tBody td").size();
	for(i=1;i<columnNum;i++){
		//获取每一列值
		var tdList=$('#tBody tr').find('td:eq('+i+')');
		//遍历列里面所有值
		for(j=0;j<tdList.length;j++){
			if(tdList[j].isEqualNode(tdList[j+1])){
				break;
			}else{
				tdList.css("background-color", "red");
			}
		}
	}

以上就完成了对数据页面的处理，权做记录学习，有更好的方法也请大家多多指导。