通过Javascript实现把数组里的内容以表格方式呈现到页面从

news/2024/7/10 3:01:53 标签: javascript, js, html, vue, python
htmledit_views">

一、把数组里的内容呈现到页面从,以表格方式

html"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.tb,th,td{
		border: 1px solid #CC5D5E;		
	}
</style>
</head>

<body>
	<table class="tb">
		
		<th>ID</th>
		<th>姓名</th>
		<th>年龄</th>
		
	</table>		
<script>
var Data=[
	{id:1, name:"小米", age:18},
	{id:2, name:"小明", age:10},
	{id:3, name:"小菜", age:20}
]
var tbody=document.querySelector("tbody")
Data.forEach(function(i){
	//i代表数组中的每一个对象
		
	//创建一个tr
	var tr=document.createElement("tr")
	//循环遍历i对象
	for(var key in i){
	
		 //创建td标签
	     var td=document.createElement("td")
         //向td标签里插入(修改)内容
	    var cc=td.innerText=i[key]
		//向tr标签里插入td标签(有内容)
		tr.appendChild(td)			
	}
	//向tbody元素里插入tr标签
	tbody.appendChild(tr)	
	})
</script>
</body>
</html>

http://www.niftyadmin.cn/n/1508189.html

相关文章

Javascript中常用事件集合和事件使用方法

Javascript中常用事件集合和事件使用方法 一、事件绑定 格式&#xff1a; 事件源 . on事件类型事件处理函数 事件绑定三要素 1、事件源&#xff1a;和谁绑定 2、事件类型&#xff1a;什么事件 3、事件处理函数&#xff1a;触发了要执行什么 二、常用事件类型 鼠标事件键盘事件浏…

屏幕使用时间忘了能还原吗_忘记了屏幕使用时间的密码怎么办,解决方法从这揭秘~...

如果您没有使用“家人共享”来管理儿童帐户&#xff0c;请按以下步骤操作&#xff1a;确保您当前使用的是孩子使用的那台 Mac&#xff0c;并且您已登录孩子所用的标准帐户。如果您不确定该怎么做&#xff0c;只需继续完成下面的步骤&#xff1a;“屏幕使用时间”将会帮助您。选…

Javascript实现让图片一直跟着鼠标移动

Javascript实现让图片一直跟着鼠标移动 注意&#xff1a;图片可能加载不出来&#xff0c;还请及时更换图片 <!doctype html> <html> <head> <meta charset"utf-8"> <title>永恒之月</title> <style> body {margin: 0;padd…

感谢51cto提供的购书券

今天下午收到了在亚马逊上面买的两本《TCP/IP路由技术卷一》和《TCP/IP路由技术卷二》。其中卷二是最新版的。这个可是用51CTO奖品100元卓越亚马逊的购物券买的哦&#xff0c;自己才掏了41.1元钱。纸张看上去还不错。经典之作&#xff0c;看上去就是舒服。去年看PDF版的&#x…

HTML+CSS+Javascript实现轮播图效果

HTMLCSSJavascript实现轮播图效果 注意&#xff1a;根据自己图片大小来更改轮播图大小。 <!doctype html> <html> <head> <meta charset"utf-8"> <style> * {margin: 0;padding: 0; } /*去掉ul、ol、li源有的样式*/ ul, ol, li {list-…

把文字放在图片右边_像杂志一样在图片上写字,来了解一下~

图文排版H5秀手机图文参考实体出版物是提升排版技巧的最佳途径&#xff0c;可以将适宜的版式设计应用到图文中&#xff1b;就比如我们在翻阅杂志时&#xff0c;会碰到很多是将文字放在图片上的版式组合&#xff0c;我们的小伙伴在投稿时也会做类似的版式&#xff0c;就像今天要…

Javascript面向对象——创建对象、构造函数的原型

Javascript面向对象——创建对象、构造函数的原型 其实&#xff1a;JavaScript中的创建类&#xff0c;就是创建一个构造函数&#xff0c;在创建对象时用到new这个关键字&#xff0c; 一、创建对象 1.函数创建对象 function creatObj(name,age){//手动创建一个对象var obj{}//为…

jq取第一个子元素为select_最大连续子序列和(算法)

2019/5/2修改最近看到的一道编程题目&#xff1a;有一个数组&#xff0c;如1&#xff0c; &#xff0d;5&#xff0c; 8&#xff0c; 3&#xff0c; &#xff0d;4&#xff0c; 15&#xff0c; &#xff0d;8&#xff0c;查找其中连续和最大的相邻串的值。在本例中&#xff0c;…