首先获取到的数据如下:
[ {"ID":"1020806","Company":"市金镍业","TableID":"22","ProvinceID":"102","CityID":"10208","Properties":"民营企业","Subordination":"个人","BusinessScope":"制造","EmployeeNum":0,"Assets":0.00,"SelfAssets":0.00,"OutputLastYear":0.00,"IncomeLastYear":0.00,"ProfitLastYear":0.00,"TableName":"制造业生产用油量周监测表"}, {"ID":"1020806","Company":"市松桥建筑公司","TableID":"23","ProvinceID":"102","CityID":"10208","Properties":"民营企业","Subordination":"个人","BusinessScope":"建筑","EmployeeNum":0,"Assets":0.00,"SelfAssets":0.00,"OutputLastYear":0.00,"IncomeLastYear":0.00,"ProfitLastYear":0.00,"TableName":"建筑施工用油量周监测表"},
{"ID":"1020806","Company":"市水泥有限公司","TableID":"23","ProvinceID":"102","CityID":"10208","Properties":"民营企业","Subordination":"个人","BusinessScope":"生产水泥","EmployeeNum":0,"Assets":0.00,"SelfAssets":0.00,"OutputLastYear":0.00,"IncomeLastYear":0.00,"ProfitLastYear":0.00,"TableName":"建筑施工用油量周监测表"},
{"ID":"1020806","Company":"城发电厂","TableID":"24","ProvinceID":"102","CityID":"10208","Properties":"地方政府企业","Subordination":"省政府","BusinessScope":"发电","EmployeeNum":0,"Assets":0.00,"SelfAssets":0.00,"OutputLastYear":0.00,"IncomeLastYear":0.00,"ProfitLastYear":0.00,"TableName":"电力行业用油量周监测表"},
{"ID":"1020806","Company":"国电龙华城热电厂","TableID":"24","ProvinceID":"102","CityID":"10208","Properties":"中央企业","Subordination":"中央","BusinessScope":"发电、供热","EmployeeNum":0,"Assets":0.00,"SelfAssets":0.00,"OutputLastYear":0.00,"IncomeLastYear":0.00,"ProfitLastYear":0.00,"TableName":"电力行业用油量周监测表"},
{"ID":"1020806","Company":"市海鹰物流","TableID":"26","ProvinceID":"102","CityID":"10208","Properties":"民营企业","Subordination":"个人","BusinessScope":"运输","EmployeeNum":0,"Assets":0.00,"SelfAssets":0.00,"OutputLastYear":0.00,"IncomeLastYear":0.00,"ProfitLastYear":0.00,"TableName":"公路运输用油周监测表"} ]
需求如下图:不同行业的 “行业用油监测表”要求只出现一个,但是下面的具体内容要求只要是获取到数据里面有的就得显示出来,如下图所示:图中红笔,蓝笔所为主的分别为两个拼接出来的table
前台代码如下:
1 $.post("user_details.ashx", { t: "s", id: userId, state: IndustryState, p: 2 }, function (data) { 2 if (!data) return; 3 var industry = eval(data); 4 if (!industry) return; 5 var table = "", flag = ""; 6 for (var i = 0; i < industry.length; i++) { 7 var title = industry[i].TableName; 8 if (flag != title) {//之前这里这个标记并没有写,然后显示出来的表是,一个“行业用油监测表”一个具体数据,会出现重复的“行业用油监测表”,不是想要的效果,如下图所示 9 table += "<table border=\"0\">"; 10 table += " <tr><td> <img src=\"http://images.cnblogs.com/1.png\" width=\"18\" height=\"18\" /> </td>"; 11 table += " <td>" + title + "</td></tr></table>"; 12 flag = title;//但是在哥们的指点下加上一个这个flag标记后,解决了重复出现表名的问题,这个思想不错,很简单的两个代码,为我来说值得学习,分享给园友们 13 } 14 table += "<table width=\"100%\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\" class=\"borderColor\" bgcolor=\"f2f1ef\">"; 15 var tr = ""; 16 var companyId = industry[i].ID; 17 var tableId = companyId.substr(8, 2); 18 tr += "<tr><td style=\"width:65%;padding-left:5px\">" + industry[i].Company + 19 "</td><td style=\"width:20%;padding-left:5px\">" + industry[i].Properties + 20 "</td><td style=\"width:15%;padding-left:5px\"><a href=\"javascript:void(0)\" οnclick=\"openWin(" + companyId + ")\">详细</a>" + "</td></tr>"; 21 table += tr; 22 table += "</table>"; 23 } 24 var div = document.createElement("div"); 25 div.innerHTML = table; 26 document.body.appendChild(div); 27 });
有瑕疵的效果图: