javascript动态创建div循环列表

动态循环加载列表,实现vue中v-for的效果

效果图:

代码:

var noApplicationRecord = document.getElementById('noApplicationRecord')//模拟数据
var data = [{ business: '万达影院(万胜广场店)', count: '325', num: '20170012565863565656', time: '2017-10-12 16:30', license: '粤A88888' },{ business: '麦当劳', count: '111', num: '20170012565863565656', time: '2017-10-12 16:30', license: '粤A99999' },{ business: '肯德基', count: '456', num: '20170012565863565656', time: '2017-10-12 16:30', license: '粤A45466' }
]
//绘制单个div
function setDiv(item){var div = '<div class="body-no-list"><div class="body-no-list-header" ><div class="body-no-list-header-title">'+ item.business+ '</div><div class="body-no-list-header-txt">消费金额:&nbsp;'+ item.count+ '元<br>消费单号:&nbsp;'+ item.num+ '<br>提交时间:&nbsp;'+ item.time+ '</div></div><div class="body-no-list-bottom"><div class="body-no-list-bottom-vehicl">'+ item.license+ '</div><div><button>撤销</button><button> 修改</button></div></div></div> 'return div
}
//循环加载到页面
function getnoApplicationData(){var html = ''for(var i = 0;i<data.length;i++){html += setDiv(data[i])}noApplicationRecord.innerHTML = html
}window.onload = getnoApplicationData()

HTML页面循环遍历数据,不用JSTL标签相关推荐

(js)模板字符串中使用循环遍历数据：
(js)模板字符串中使用循环遍历数据: // 数据格式 let wordList = {id: "2",question: "李四",content: [{ n ...
es6模板字符串中循环遍历数据踩坑
应该很少有这种需求,需要在模板字符串利循环遍历数据,现在框架都有自己模板语法. 我这里踩的坑是,我在模板字符串中用forEach,map遍历循环时,返回值一直是一个undefined 用for循环re ...
el表达式循环_EL表达式和JSTL标签库(百战程序员047天）
1.EL表达式介绍:是一种非常简洁的表达式,语法简单,便于使用,灵感来源于ECMAScript和Xpath的表达式语言样式: ${表达式} 作用:简化jsp中获取作用域或者请求数据的写法. 获取请 ...
layui循环遍历数据_layuiAdmin循环遍历展示商品图片列表的方法
主页面内容新增 {{# layui.each(d.list, function(index, item){ }} {{# if(item.cover_img == ""){ }} ...
layui循环遍历数据_Layui之动态循环遍历出的富文本编辑器显示
这篇记得是工作中的例子描述: 平常的富文本显示都是根据静态的html获取id来显示,比如: 富文本内容 layui.use([ "form", "layer" ...
js的eval函数解析后台返回的json数据时为什加上圆括号eval((+data+))，而HTML页面定义的数据不用...
一,情况如下,这是成功代码: $(function () {$.ajax({url: "Demo.aspx",type: "post",data: { Id: ...
flask从服务器获取html页面,flask的ajax、获取服务器数据、放到前端页面、如果数据存在显示标签、如果不存在不显示标签...
-------------------------------------第一部分----------------------------------------------------------- ...
layui循环遍历数据_layui.laytpl渲染模板，遍历、输出、判断
事先引用加载layui的laytpl模块,此处不作说明 1.定义容器(用于填充渲染后的script) 2.定义script模板角色类别: 请选择角色类别 {{# layui.each(d.roleT ...
使用taglib指令在jsp页面导入要使用的jstl标签库
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

HTML页面循环遍历数据,不用JSTL标签

javascript动态创建div循环列表

HTML页面循环遍历数据,不用JSTL标签相关推荐

最新文章

热门文章