您现在的位置是:首页 > Javascript
当前栏目
HTML编程-模板生成含有纵向跨行或横向跨列的表格。
2023-03-14 22:44:15 时间
平时我们在开发web网页时,经常遇到把数据呈现为表格报告的情况,有时需要跨列合并或跨行合并单元格来让数据更加直观突出更加条理分明。
比起其他方法,使用模板根据数据生成这样的表格的html代码尤其既高效又简洁。下面介绍一下思路:
我们将模板文本包含在<script>......</script>之间。使用时 $('#cityForecastAQITableTemplate').html()取得模板文本,使用underscore模板函数template = _.template(...模板代码..)转换为模板函数。然后传入上下文数据作为参数调用模板函数,便生成了我们需要的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如下:
["2021-11-16","2021-11-17","2021-11-18","2021-11-19","2021-11-20","2021-11-21","2021-11-22"]
2.假设地区(包含城市)数据如下:
[{
"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片段并渲染到页面上。
var cityForecastAQITableTemplate = _.template($('#cityForecastAQITableTemplate').html());
var html = cityForecastAQITableTemplate({
'dates': dates7,
'factor': factor,
'regions': regions
});
$('#tableCityForecastAQI').html(html);
5.效果如下:
相关文章
- 鲜为人知但很有用的 HTML 属性
- 翻转再翻转!有意思的水平横向溢出滚动
- 自定义计数器小技巧!CSS 实现长按点赞累加动画
- 过五关!React高频面试题指南
- 软件开发中的十个认知偏差
- 不需要 JS!仅用 CSS 也能达到监听页面滚动的效果!
- 一文读懂TypeScript类型兼容性
- Vue 的响应式原则与双向数据绑定
- 快速掌握 TypeScript 新语法:Infer Extends
- JWT教你如何证明你是我的人!
- 一篇带给你 V8 GC 的实现
- 面试官:请使用JS完成一个LRU缓存?
- 通过可视化来学习JavaScript事件循环
- 新的跨域策略:使用 COOP、COEP 为浏览器创建更安全的环境
- 为什么有人说 vite 快,有人却说 vite 慢?
- 种草 Vue3 中几个好玩的插件和配置
- 超全面的前端工程化配置指南
- Vue 状态管理未来样子
- Volatile关键字能保证原子性么?
- 面试突击:SpringBoot 有几种读取配置文件的方法?