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

<!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. Django常用的QuerySet操作

    在这里我根据是否支持链式调用分类进行介绍 1. 支持链式调用的接口 all 使用频率比较高,相当于SELECT * FROM table 语句,用于查询所有数据. filter 使用频率比较高,根据条 ...

  2. socket网络编程基础模块

    更多功能 sk = socket.socket(socket.AF_INET,socket.SOCK_STREAM,0) 参数一:地址簇 socket.AF_INET IPv4(默认) socket. ...

  3. label标签利用jquery获取值得方式为$("#message").html()

    label标签利用jquery获取值的方式为$("#message").text(), 赋值的方式为:$("message").html("北京欢迎你 ...

  4. Solon 1.6.10 重要发布,现在有官网喽!

    关于官网 千呼万唤始出来: https://solon.noear.org .整了一个月多了,总体样子有了...还得不断接着整! 关于 Solon Solon 是一个轻量级应用开发框架.支持 Web. ...

  5. Error: Not found: 'package:json_annotation/json_annotation.dart'

    问题原因 json_annotation版本不对 修改json_annotation版本号 当前可用版本号 json_annotation: ^2.2.0

  6. [COCI2018-2019#2] Sunčanje 题解

    link 考虑简洁的 \(\text{cdq}\) 做法. 约定:第 \(i\) 个矩形左下角为 \((xl_i,yl_i)\),右上角为 \((xr_i,yr_i)\),所有坐标都已离散化. 如果 ...

  7. 平衡二叉树(c++实现)续

    !!版权声明:本文为博主原创文章,版权归原文作者和博客园共有,谢绝任何形式的 转载!! 作者:mohist --- 欢迎指正--- 题外话:上一篇关于平衡二叉树文章中,我都没说自己是怎么理解的.别人终 ...

  8. nim_duilib(11)之menu(1)

    introduction 更多控件用法,请参考 here 和 源码. 本文的代码基于这里 本文将介绍menu控件 xml文件添加代码 基于上一篇, 继续向basic.xml中添加下面的代码. xml完 ...

  9. 【LeetCode】53. Maximum Subarray 最大子序和 解题报告(Python & C++ & Java)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 暴力解法 动态规划 日期 题目地址: https:/ ...

  10. 【LeetCode】152. Maximum Product Subarray 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 双重循环 动态规划 参考资料 日期 题目地址:htt ...