平时我们在开发web网页时，经常遇到把数据呈现为表格报告的情况，有时需要跨列合并或跨行合并单元格来让数据更加直观突出更加条理分明。
比起其他方法，使用模板根据数据生成这样的表格的html代码尤其既高效又简洁。下面介绍一下思路：
我们将模板文本包含在<script>......</script>之间。使用时 $('#cityForecastAQITableTemplate').html()取得模板文本，使用underscore模板函数template = _.template(...模板代码..)转换为模板函数。然后传入上下文数据作为参数调用模板函数，便生成了我们需要的html片段。
模板代码如下:
代码语言：html复制<script type="text/template" id="cityForecastAQITableTemplate">
<table class="table table-bordered border-secondary">
<thead>
<tr>
<th class="region" rowspan="2">
<b>区域</b></th>
<th class="city" rowspan="2">
<b>城市</b></th>
<% _.each(dates,function(date){ %>
<% if(factor=='AQI') %>
<th class="date" colspan="4">
<b><%=date%></b>
</th>
<% ;%>
<% if(factor!='AQI') %>
<th class="date" colspan="3">
<b><%=date%></b>
</th>
<% ;%>
<% }) %>
</tr>
<tr>
<% _.each(dates,function(date){ %>
<th class="min">
<b>MIN</b></th>
<th class="max">
<b>MAX</b></th>
<th class="value">
<b><%=dictFactor[factor]%></b>
</th>
<% if(factor=='AQI') %>
<th class="primary">
<b>首污</b>
</th>
<% ;%>
<% })%>
</tr>
</thead>
<tbody>
<% _.each(regions,function(region,rIndex){ %>
<% var citys=region['citys'] %>
<% _.each(citys,function(city,cIndex){ %>
<tr data-city="<%=city['code']%>">
<% if(cIndex==0) %>
<td rowspan="<%=citys.length%>" data-region="<%=region['code']%>"><%=region['name']%></td>
<% ;%>
<td data-city="<%=city['code']%>"><%=city['name']%></td>
<% _.each(dates,function(date,dIndex){ %>
<td data-col="min" data-date="<%=date%>">0</td>
<td data-col="max" data-date="<%=date%>">0</td>
<td data-col="value" data-date="<%=date%>">0</td>
<% if(factor=='AQI') %>
<td data-col="primary" data-date="2021-11-16">0</td>
<% ;%>
<% }); %>
</tr>
<% }); %>
<% }); %>
</tbody>
</table>
</script>1.假设日期数据dates如下:
代码语言：json复制["2021-11-16","2021-11-17","2021-11-18","2021-11-19","2021-11-20","2021-11-21","2021-11-22"]2.假设地区(包含城市)数据如下:
代码语言：json复制[{
"code": "北部",
"name": "北部",
"citys": [{
"name": "安阳",
"code": "安阳"
}, {
"name": "鹤壁",
"code": "鹤壁"
}, {
"name": "濮阳",
"code": "濮阳"
}, {
"name": "新乡",
"code": "新乡"
}, {
"name": "焦作",
"code": "焦作"
}]
}, {
"code": "中部",
"name": "中部",
"citys": [{
"name": "郑州",
"code": "郑州"
}, {
"name": "开封",
"code": "开封"
}, {
"name": "许昌",
"code": "许昌"
}, {
"name": "漯河",
"code": "漯河"
}, {
"name": "平顶山",
"code": "平顶山"
}]
}, {
"code": "东部",
"name": "东部",
"citys": [{
"name": "商丘",
"code": "商丘"
}, {
"name": "周口",
"code": "周口"
}]
}, {
"code": "南部",
"name": "南部",
"citys": [{
"name": "驻马店",
"code": "驻马店"
}, {
"name": "信阳",
"code": "信阳"
}]
}, {
"code": "西部",
"name": "西部",
"citys": [{
"name": "三门峡",
"code": "三门峡"
}, {
"name": "洛阳",
"code": "洛阳"
}]
}, {
"code": "西南部",
"name": "西南部",
"citys": [{
"name": "南阳",
"code": "南阳"
}]
}, {
"code": "西北部",
"name": "西北部",
"citys": [{
"name": "济源",
"code": "济源"
}]
}]3.选择的因子为AQI
4.调用模板函数生成html片段并渲染到页面上。
代码语言：javascript复制var cityForecastAQITableTemplate = _.template($('#cityForecastAQITableTemplate').html());
var html = cityForecastAQITableTemplate({
'dates': dates7,
'factor': factor,
'regions': regions
});
$('#tableCityForecastAQI').html(html);5.效果如下:
