模板字符串生成网页

最新推荐文章于 2023-09-14 16:44:39 发布

绿蚁新醅酒红泥小火炉

最新推荐文章于 2023-09-14 16:44:39 发布

阅读量336

点赞数

分类专栏： es6 文章标签： es6

本文链接：https://blog.csdn.net/u013006851/article/details/90107890

版权

es6 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模版字符串</title>
</head>

<body>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
	
	(function(){
		
		
		$(document).ready(function(){
			var tmp = Object({
				title: "前端",
				data: [{
					title: '布局基础',
					date: ["html", "css"]
				}, {
					title: '网页特效',
					date: ["javascript", "jquery"]
				}, {
					title: '框架',
					date: ["bootstrap", "vue"]
				}]
			});
			const tmp1 = tmp;

			function getData(data)
			{
				
				let dataArr = [];
				for(let index in data)
				{
					let arr=[];
					let item=data[index];
					arr.push(`<td>${item.title}</td>`);
					for(let index2 in item.date)
					{
					   let item2=item.date[index2];
					   arr.push(`<td>${item2}</td>`);
					}
					dataArr.push(`<tr>${arr.join('')}</tr>`);
				}
				return dataArr.join('');
			}
			const {title,data}=tmp1;
			$("body").append(`<hr/>
			<div style="text-align:center;">${title}</div>
			<br/>
			<table border="1" width="100%">${getData(data)}</table>`);
		});
	})();
    
    </script>
</body>
</html>

绿蚁新醅酒红泥小火炉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模板字符串生成网页

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>模版字符串</title></head><body> <script src="https://cdn.bootcss.com/jquery/1....
复制链接

扫一扫

专栏目录