使用json数据动态创建表格2(多次绘制第一次简化 var tr=tbody.insertRow();)
<!DOCTYPE HTML>
<html>
<head>
<title>动态创建表格</title>
<meta charset="utf-8" />
<style>
table{width:600px; border-collapse:collapse;
text-align:center;
}
td,th{border:1px solid #ccc}
</style> </head>
<body>
<div id="data">
<!--table>(thead>tr>th*3)+tbody + tab-->
<table>
<thead>
<tr>
<th>ename</th>
<th>salary</th>
<th>age</th>
</tr>
</thead>
</table>
</div>
<script>
var json=[
{"ename":"Tom", "salary":11000, "age":25},
{"ename":"John", "salary":13000, "age":28},
{"ename":"Mary", "salary":12000, "age":25}
];
//动态创建父元素tbody
var tbody=document.createElement("tbody");
//暂时不要将tbody追加到table中
//先在内存中,将所有行加到tbody中
//遍历json中每个员工对象
for(var emp of json){ //每遍历一个员工对象,就创建一个tr元素,并追加到tbody中
// var tr=document.createElement("tr");
//将tr追加到tbody下
// tbody.appendChild(tr); var tr=tbody.insertRow();//上面两句简化为一句
//遍历当前员工对象emp中的每个属性
// 属性名
for(var pname in emp){
//每遍历一个属性,就创建一个td
var td=document.createElement("td")
//<td></td>
//并将td追加到tr中
tr.appendChild(td);
//设置td的内容为当前对象的当前属性值:
td.innerHTML=emp[pname];
//emp.pname;
//emp["pname"]
}
} //最后再将tbody一次性追加到table中
document.querySelector("table")
.appendChild(tbody);
</script>
</body>
</html>
使用json数据动态创建表格2(多次绘制第一次简化 var tr=tbody.insertRow();)的更多相关文章
- js将json数据动态生成表格
今天开发中遇到需要展示动态数据的问题, 具体要求是后端传来的json字符串,要在前端页面以table表格的形式展示, 其实没啥难的,就是拼接table标签,纯属体力活,于是自己写了个呆萌,保存起来,以 ...
- 初探原生js根据json数据动态创建table
初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...
- jQuery 根据JSON数据动态生成表格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 一起使用mock数据动态创建表格
在ant-design中,我们创建一个基础table会怎么实现呢? 如下代码可视,我们会自己创建一些数据,在表格中渲染出来,如下 <Card title="基础表格"> ...
- jQuery利用JSON数据动态生成表格
<style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; fon ...
- mui 根据 json 数据动态创建列表
使用 underscore.js 模块解析 Underscore提供了一个轻量级的模板解析函数,它可以帮助我们有效地组织页面结构和逻辑. 实例: <!DOCTYPE html> <h ...
- FineUIMvc随笔 - 动态创建表格列
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户需求 用户希望实现动态创建表格列,在 WebForms 中,我们通过在 Page_Init 中创建列来实现: 但是在 MVC ...
- FineUIMvc随笔(1)动态创建表格列
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. <FineUIMvc随笔>目录 FineUIMvc随笔(1)动态创建表格列 FineUIMvc随笔(2)怎样在控件中 ...
- js/jq动态创建表格的行与列
之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个 需求大概是(下图) 1.动态添加一行.2.动态添加一列,3.删除行.4.删除列, ...
- 利用javascript动态创建表格
//说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1. trNode table.insertRow(-1) ...
随机推荐
- 4.websocket基本概念
websockey的模式就是在于当前端向后端发送请求创建一个websocket链连接之后,连接默认不断开,前端和服务端就维护了一个连接,前端可以通过连接给服务端发消息,服务端也可以通过连接给前端发消息 ...
- vue3+element-plus+登录逻辑token+环境搭建
vue3+element-plus+登录逻辑token环境搭建 安装脚手架工具 1 npm i @vue/cli@4.5.13 -g 验证是否安装成功 1 vue -V # 输出 @vue/cli 4 ...
- Sublime Text怎样自定义配色和主题
一.自定义配色方案 1 基础知识 配色方案[Color Scheme]文件保存在以下路径[ST安装目录]: "D:\Program Files\Sublime Text\Packages\C ...
- 我的 React 最佳实践
There are a thousand Hamlets in a thousand people's eyes. ----- 威廉·莎士比亚 免责声明:以下充满个人观点,辩证学习 React 目前开 ...
- clip-path属性深入理解与使用
clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域.区域内的部分显示,区域外的隐藏. clip-path的属性值可以是以下几种: 1.inset: 将元素剪裁为一个矩形, ...
- 更改安装Oracle数据库时设定的System sys等用户的密码
因本地Oracle数据库安装久远,不知道连接账号密码,查阅了一些资料最终修改成功,Mark up! 1 在开始菜单找到Oracle服务,打开SQL plus 2 输入命令连接到数据库并修改部分用户密码 ...
- vue 数组更新(push【可用】,$set,slice,filter,map【都属于浅拷贝】)问题
this.$axios.post('https://....php',this.$qs.stringify({ user: 'suess' })) .then(res => { this.dat ...
- 嵌入式-C语言基础:数组作为参数传递需要注意的问题
#include <stdio.h> void printData(int data) { printf("%d\n",data); } //形参中不存在数组的概念,即 ...
- 回溯算法经典问题总结(.NET版)
回溯算法 回溯法其实也是一种递归,本质上就是穷举,然后筛选出符合规则的数据.为了使回溯更加高效,我们根据规则要求,在穷举过程中加上条件限制(也就是剪枝). 我们什么场景下应该想到使用回溯法呢? 如何画 ...
- Codeforces Round #833 (Div. 2)补题
Codeforces Round #833 (Div. 2) D. ConstructOR 知识点:高位和对低位无影响 一开始以为和广州的M一样,是数位dp,后来发现只要找到一个就行 果然无论什么时候 ...