通过Javascript实现把数组里的内容以表格方式呈现到页面从
一、把数组里的内容呈现到页面从，以表格方式
<!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实现把数组里的内容以表格方式呈现到页面从的更多相关文章
- java里如何实现循环打印出字符或字符数组里的内容
不多说,直接上干货! java里如何实现循环打印出字符里的内容 没写,暂时不会 java里如何实现循环打印出字符数组里的内容 public class test { public static voi ...
- java里如何实现循环打印出字符串或字符串数组里的内容
不多说,直接上干货! java里如何实现循环打印出字符串里的内容 思路:可以先将字符串转换成字符串数组. public class test { public static void main(Str ...
- 使用 JavaScript 的 HTML 页面混合、JavaScript 文件引用和 HTML 代码嵌入 3 种方式在 HTML 页面上打印出“点击我进入到百度首页”的超链接
查看本章节 查看作业目录 需求说明: 使用 JavaScript 的 HTML 页面混合.JavaScript 文件引用和 HTML 代码嵌入 3 种方式在 HTML 页面上打印出"点击我进 ...
- [Selenium] 使用Javascript选中Input框里的内容，然后清空
当我们需要清空Input框里的内容,直接使用el.clear()方法又行不通时,可以使用Javascript先去选中内容,然后再使用el.clear()方法:
- JavaScript取出字符串中括号里的内容
/** * 取出中括号内的内容 * @param text * @returns {string} */ export function getBracketStr(text) { let resul ...
- Java Web中将oracle的数据库内容以表格形式展现到页面中（分页展示）
分页SQL语句: ----分页显示 select * from (select rownum as r,t.* from () ; 查询的结果如下: 这个SQL,使用了三层嵌套的查询方式: 1)最内层 ...
- PHP的数组值传入JavaScript的数组里
<!doctype html public "-//W3C//DTD HTML 4.0 //EN"> <html><head> &l ...
- JavaScript怎么把对象里的数据整合进另外一个数组里
https://blog.csdn.net/qq_26222859/article/details/70331833 var json1 = [ {"guoshui":[ 3000 ...
- JavaScript中的数组详解
JavaScript中的数组 一.数组的定义 数组是值的有序集合,或者说数组都是数据的有序列表. 二.创建数组 [字面量形式] 1.空数组 var arr=[]; 2.带有元素的数组 var arr= ...
随机推荐
- mapbox获取各种经纬度
点击地图即可获取经纬度,也可以手动输入经纬度来换算 在线查看运行效果 实现方法 mapbox中通过地图点击事件来获取到坐标,然后转换为其他的坐标系并输出在屏幕上即可 获取坐标 方法很简单,给地图添加一 ...
- 当动态桌面遇上 HTML5
DreamScene2 + HTML5 = 无限可能.时隔一周,DreamScene2 动态桌面经过几个小版本的迭代,修复了一些问题并且功能也得到了增强.欢迎 Star 和 Fork https:// ...
- java 输入输出IO流 RandomAccessFile文件的任意文件指针位置地方来读写数据
RandomAccessFile的介绍: RandomAccessFile是Java输入输出流体系中功能最丰富的文件内容访问类,它提供了众多的方法来访问文件内容,它既可以读取文件内容,也可以向文件输出 ...
- windows安装openoffice4
官网:https://www.openoffice.org/download/index.html 下载完成后 直接点击安装即可
- C/C++ 基本类型 占字节
下面给出不同位数编译器下的基本数据类型所占的字节数: 16位编译器 char :1个字节char*: 2个字节(即指针变量)short: 2个字节int: 2个字节unsigned int : 2个 ...
- lldb调试C++总结(2)
lldb help 可能你会忘记某些指令的用法, 使用help可以帮助你. (lldb) breakpoint --help invalid command 'breakpoint --help'. ...
- 【LeetCode】1182. Shortest Distance to Target Color 解题报告 (C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 字典+二分查找 日期 题目地址:https://lee ...
- P1599 货币
背景 又是一道水题 描述 在某个神秘的星球上有一种货币,它有一种奇怪的兑换规则 你有且仅有一枚面值为n的金币,你可以去银行进行兑换,也可以不兑换 如果去银行兑换,兑换的规则是这样的:用面值为a的金币去 ...
- 另一个角度看元宇宙与RPA：人工世界、平行员工与RPA
另一个角度看元宇宙与RPA:人工世界.平行员工与RPA 从元宇宙到平行员工,人工世界推动的虚实分工利好RPA 机器人是铁打营盘人类是流水兵,未来元宇宙的虚实分工RPA机会巨大 文/王吉伟 元宇宙是平行 ...
- 编写Java程序，模拟文件操作过程中的异常处理
返回本章节 返回作业目录 需求说明: 从控制中输入计算机磁盘中后缀名为".txt"的文件的完整物理路径. 如果该文件存在,则在控制台输出友好提示信息,告知用户该文件存在,如果文件不 ...