项目中的变更审核页面，用户希望用红色标记出哪些地方是变更过的，方便审核。
由于项目中变更前的信息和变更后的信息是分表存的，后台也是直接封装了两个对象返回前台。所以一个属性一个属性进行比较进行标记吗？这种体力活太无聊了。这种重复的工作就应该让机器来干，想办法做个循环比较就行了。
以下直接在 JS 中定义了两个对象，开始进行比较打标记。
testMarkDiff.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>变更表单显示页</title>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/jsonTest.js" charset="utf-8"></script>
<style type="text/css">
.updatedTag{
color: red; font-weight: bolder;}
li{
float: left; list-style-type: none;}
table.tableStyle {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.tableStyle th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.tableStyle td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<ul>
<li>企业名称：</li><li id="testName"></li>
</ul>
<br/>
<ul>
<li>企业地址：</li><li id="testAddr"></li>
</ul>
<br/>
<ul>
<li>企业团队：</li>
<li>
<table id="testTable" class="tableStyle">
<tr>
<th>姓名</th><th>编号</th><th>年龄</th><th>性别</th>
</tr>
</table>
</li>
</ul>
<br/>
</body>
</html>
jsonTest.js
jQuery( function($) {
var oldInfo = {
"name":"北京科技公司", "addr":"北京海淀",
"members":[{
"memberName":"小刚","addr":"北京","age":"20"},
{
"memberName":"小红","addr":"上海","age":"15"}]};
var updInfo = {
"name":"北京科技公司", "addr":"北京丰台",
"members":[{
"memberName":"小刚","addr":"天津","age":"20","gender":"男"},
{
"memberName":"小美","addr":"浙江","age":"18"}]};
for(var key in updInfo){
if(typeof(updInfo[key]) == 'object'){
}else{
if(oldInfo[key] != updInfo[key]){
updInfo[key] = "<span class='updatedTag'>" + updInfo[key] + "</span>";;
}
}
}
//------------------获取对象里面的members对象------------------------------------------
var oldMem = oldInfo.members;
var updMem = updInfo.members;
markUpdated(oldMem, updMem);
//------------------------------------------------------------------
$("#testName").html(updInfo.name);
$("#testAddr").html(updInfo.addr);
$(updMem).each(function(i,obj){
var strTr="<tr>" +
"<td>"+ obj.memberName +"</td>" +
"<td>"+ obj.addr +"</td>" +
"<td>"+ obj.age +"</td>" +
"<td>"+ obj.gender +"</td>" +
"</tr>";
$("#testTable tr").last().after(strTr);
})
});
//注意：此方法的参数必须是对象列表，且对象的对应属性是一样的
function markUpdated(oldObjList, newObjList){
var i = 0;
var j = 0;
for(;i<newObjList.length;i++){
var isSame = false; //是否是同一个人
for(;j<oldObjList.length;j++){
//获取两个对象的同一个人，默认同名为同一个人
if(newObjList[i].memberName == oldObjList[j].memberName){
isSame = true;
break;
}else{
//如果没有找到，说明此人是新增加的
// isSame = false;
}
}
if(isSame){
//是同一个人，则开始循环比较这个对象的属性
for(var key in newObjList[i]){
if(typeof(newObjList[i][key]) == "object"){
}else{
if(oldObjList[j][key] != newObjList[i][key]){
//属性值不同即已变更，标记为红色
newObjList[i][key] = "<span class='updatedTag'>" + newObjList[i][key] + "</span>";
//alert("此对象 "+ key+"属性："+oldObjList[j][key]+"====>>"+newObjList[i][key]);
}else{
//alert("此对象 "+ key+"属性不变："+newObjList[i][key]);
}
}
}
}else{
//新增的此人的所有属性标记为红色
for(var key in newObjList[i]){
newObjList[i][key] = "<span class='updatedTag'>" + newObjList[i][key] + "</span>";
}
//alert(newObjList[i].memberName+"此人新增");
}
}
}
运行后效果就是这样的。界面比较丑，不要在意啦，功能实现就好了。。。
有兴趣的朋友只要看看 js 中定义的方法就行了，其实也挺简单的，只是一开始没想到这么来做。