通过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= ...
随机推荐
- LuoguP5139 z小f的函数 题解
Content 给定 \(T\) 个二次函数 \(y=ax^2+bx+c\),有若干次操作,有一个操作编号 \(p\),保证仅为以下这五种: 操作 \(1\):给定 \(k\),将函数图像向上移动 \ ...
- java 多线程 线程池:多核CPU利用ExecutorService newWorkStealingPool; ForkJoinPool线程池 执行可拆分的任务RecursiveAction;RecursiveTask
1,给定并行级别: 1,ExecutorService newWorkStealingPool(int parallelism): 创建持有足够的线程的线程池来支持给定的并行级别,该方法还会使用多个队 ...
- mysql绿色版添加服务
- JAVA将文件转换成byte数组(byte[])
/** * 将文件转换成byte数组 * @param filePath 文件File类 通过new File(文件路径) * @return byte数组 */ public static byte ...
- 【LeetCode】1579. 保证图可完全遍历 Remove Max Number of Edges to Keep Graph Fully Traversable
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题思路 并查集 代码 欢迎加入组织 日期 题目地址:https ...
- 【LeetCode】294. Flip Game II 解题报告 (C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 记忆化搜索 日期 题目地址:https://leetc ...
- 【九度OJ】题目1179:阶乘 解题报告
[九度OJ]题目1179:阶乘 解题报告 标签(空格分隔): 九度OJ http://ac.jobdu.com/problem.php?pid=1179 题目描述: 输入n, 求y1=1!+3!+-m ...
- Generative Modeling by Estimating Gradients of the Data Distribution
目录 概 主要内容 Langevin dynamics Score Matching Denoising Score Matching Noise Conditional Score Networks ...
- Spring Boot 2 中的默认日志管理与 Logback 配置详解
Spring Boot在所有内部日志中使用Commons Logging,但是对底层日志的实现是开放的.在Spring Boot生态中,为Java Util Logging .Log4J2 和Logb ...
- RTD2171U替代方案|CS5266Typec转HDMI 4K60HZ转换芯片方案|CS5266芯片
RTD2171U 是一款USB Type-C到HDMI转换器结合了USB Type-C输入接口和数字高清多媒体接口(HDMI)输出转换芯片.嵌入式微控制器基于工业标准8051内核.接收器端口将信道配置 ...