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

<!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>

通过Javascript实现把数组里的内容以表格方式呈现到页面从的更多相关文章

  1. java里如何实现循环打印出字符或字符数组里的内容

    不多说,直接上干货! java里如何实现循环打印出字符里的内容 没写,暂时不会 java里如何实现循环打印出字符数组里的内容 public class test { public static voi ...

  2. java里如何实现循环打印出字符串或字符串数组里的内容

    不多说,直接上干货! java里如何实现循环打印出字符串里的内容 思路:可以先将字符串转换成字符串数组. public class test { public static void main(Str ...

  3. 使用 JavaScript 的 HTML 页面混合、JavaScript 文件引用和 HTML 代码嵌入 3 种方式在 HTML 页面上打印出“点击我进入到百度首页”的超链接

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 的 HTML 页面混合.JavaScript 文件引用和 HTML 代码嵌入 3 种方式在 HTML 页面上打印出"点击我进 ...

  4. [Selenium] 使用Javascript选中Input框里的内容，然后清空

    当我们需要清空Input框里的内容,直接使用el.clear()方法又行不通时,可以使用Javascript先去选中内容,然后再使用el.clear()方法:

  5. JavaScript取出字符串中括号里的内容

    /** * 取出中括号内的内容 * @param text * @returns {string} */ export function getBracketStr(text) { let resul ...

  6. Java Web中将oracle的数据库内容以表格形式展现到页面中（分页展示）

    分页SQL语句: ----分页显示 select * from (select rownum as r,t.* from () ; 查询的结果如下: 这个SQL,使用了三层嵌套的查询方式: 1)最内层 ...

  7. PHP的数组值传入JavaScript的数组里

    <!doctype html public "-//W3C//DTD HTML 4.0 //EN"> <html><head>       &l ...

  8. JavaScript怎么把对象里的数据整合进另外一个数组里

    https://blog.csdn.net/qq_26222859/article/details/70331833 var json1 = [ {"guoshui":[ 3000 ...

  9. JavaScript中的数组详解

    JavaScript中的数组 一.数组的定义 数组是值的有序集合,或者说数组都是数据的有序列表. 二.创建数组 [字面量形式] 1.空数组 var arr=[]; 2.带有元素的数组 var arr= ...

随机推荐

  1. Jaeger知识点补充

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  2. 如何把Electron做成一个Runtime，让多个应用共享同一个Electron

    这个问题涉及到很多知识,而且要想把这个Runtime做好很绕. 下面我就说一下我的思路:(以下内容以Windows平台为基础,Mac平台和Linux平台还得去调查一下,才能确定是否可行) 首先,我们先 ...

  3. Postman环境变量的使用

    前言 请注意,Postman新版有ui上的改动,本文使用的Postman 版本8.4.0 for Mac, ui有调整,但是功能无改变. Postman是一款接口调测的软件,服务端开发的同学肯定会对自 ...

  4. vue+el-element中根据文件名动态创建dialog的方法

    背景 在项目中使用对话框的通常做法是把对话框封装成组件,在使用的地方引入,然后添加到template,使用visible.sync控制对话框的显示/隐藏,监听confirm事件处理用户点击确定.如下: ...

  5. HttpServletResponse工具类和HttpServletRequest工具类,前台参数接收方式和后台返回(JSON)数据格式

    RequestUtils.java 操作类 package cn.utils; import org.apache.commons.lang3.StringUtils; import org.slf4 ...

  6. IDEA控制台中文显示乱码处理

    加入 -Dfile.encoding=UTF-8 以及

  7. Git从远程仓库克隆

    首先,登陆GitHub,创建一个新的仓库,名字叫gitskills 勾选Initialize this repository with a README,这样GitHub会自动为我们创建一个READM ...

  8. 【入门到精通】❤️「Java工程师全栈知识路线」

    持续更新中- Vue前端开发 章节 内容 实践练习 Vue.js高效前端开发 • (实践练习) 第1章 Vue.js高效前端开发 • [ 一.初识Vue.js ] 第2章 Vue.js高效前端开发 • ...

  9. jquery控制元素的隐藏和显示的几种方法

    使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 方法一 显示: $("#id").show()表示为display:block, 隐藏: $("#id&q ...

  10. MySQL数据库基础（3）DDL和DML

    一.使用DDL定义数据库和表结构 结构化查询语言:(Structured Query Language,SQL)是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,专用于存取数据以及查询.更新和 ...