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

<!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. java 输入输出IO流 字符流 FileWriter FileReader

    为什么要使用字符流 当使用字节流读取文本文件时,可能会有一个小问题.就是遇到中文字符时,可能不会显示完整的字符,那是因为一个中文字符可能占用多个字节存储.所以Java提供一些字符流类,以字符为单位读写 ...

  2. SDP 格式解析

    一.SDP协议介绍 SDP 完全是一种会话描述格式 ― 它不属于传输协议 ― 它只使用不同的适当的传输协议,包括会话通知协议(SAP).会话初始协议(SIP).实时流协议(RTSP).MIME 扩展协 ...

  3. 【进阶】uniapp复现微信相册功能之【图视频编辑 + 压缩】

    基于uniapp + vue实现微信相册,在实现了微信相册的基础上增加以下功能 1: 图片编辑 2: 视频编辑 3: 文件压缩 技术实现 开发环境:HbuilderX + nodejs 技术框架:un ...

  4. 【LeetCode】761. Special Binary String 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/special- ...

  5. 【LeetCode】99. Recover Binary Search Tree 解题报告（Python）

    [LeetCode]99. Recover Binary Search Tree 解题报告(Python) 标签(空格分隔): LeetCode 题目地址:https://leetcode.com/p ...

  6. 【剑指Offer】丑数 解题报告

    [剑指Offer]丑数 解题报告(Python) 标签(空格分隔): 剑指Offer 题目地址:https://www.nowcoder.com/ta/coding-interviews 题目描述: ...

  7. Fibonacci String(hdu 1708)

    Fibonacci String Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  8. Kernel Methods for Deep Learning

    目录 引 主要内容 与深度学习的联系 实验 Cho Y, Saul L K. Kernel Methods for Deep Learning[C]. neural information proce ...

  9. 快看！❤️又一超实用浏览器插件！常用网站自动整合，JSON格式化，CSDN全站去广告！多种工具一键调用。开发者的福音！

    其实这个插件才出来的时候博主也下载了使用过,并没有什么亮点,那时候甚至觉得有点多余,因为CSDN全站去广告啥的,早就安装了油猴脚本,广告?不存在的嘿嘿.. 就在前几天看见CSDN的活动在推荐这款插件, ...

  10. Android开发 SeekBar（拖动条）的使用

    SeekBar是Progress的子类,Progress主要用来显示进度,但是不能和用户互动,而SeekBar则可以供用户进行拖动改变进度值 实现拖动进度条并显示在文本中: <?xml vers ...