js动态生成数据列表

我们通常会使用table标签来展示数据内容，由于需要展示的数据内容是随时更换的，所以不可能将展示的数据列表写死在html写死在页面中，而是需要我们根据后台传来的数据随时更换，这个时候就需要我们使用js来动态生成表格。

首先我们需要先写好页面的样式。

html部分

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js动态生成数据列表</title> <style type="text/css"> * { padding: 0; margin: 0; } #tb { width: 500px; border: 1px solid #000; border-collapse: collapse; } #tb td, #tb th { border: 1px solid #000; } #tb thead tr { height: 50px;  } #tb tbody tr { text-align: center; height: 30px; } #tb a { text-decoration: none; } #tb a:hover { color: hotpink; } </style> <meta charset="utf-8" /> </head> <body> </body> </html>

这个时候我们可以通过ajax向服务端发送请求，获取要展示的数据，由于主要目的是使用js动态展示列表，所本我们就假设已经获取到后台的数据。

js部分

var headers = ["姓名", "学科", "成绩", "删除"]; var datas = [ { "name": "马闯", "subject": "语文", "score": 90 }, { "name": "马户", "subject": "数学", "score": 100 }, { "name": "马伦", "subject": "体育", "score": 9 }, { "name": "马尧", "subject": "音乐", "score": 100 }, { "name": "马震", "subject": "语文", "score": 90 }, { "name": "马云", "subject": "语文", "score": 90 } ]; creatTable(document.body, headers, datas); //将动态生成列表的部分封装成函数，可以重复调用，也方便统一修改 function creatTable(parent, headers, datas) { var table = document.createElement("table"); table.id = "tb"; parent.appendChild(table); var thead = document.createElement("thead"); table.appendChild(thead); var tr = document.createElement("tr"); thead.appendChild(tr); for (var i = 0; i < headers.length; i++) { var th = document.createElement("th"); th.innerHTML = headers[i]; tr.appendChild(th); } var tbody = document.createElement("tbody"); table.appendChild(tbody); for (var i = 0; i < datas.length; i++) { var tr = document.createElement("tr"); tbody.appendChild(tr); for (var k in datas[i]) { var td = document.createElement("td"); td.innerHTML = datas[i][k]; tr.appendChild(td); } var td = document.createElement("td"); td.innerHTML = "<a href='javascript:'>删除</a>"; tr.appendChild(td); td.children[0].onclick = function { var lines = tbody.children.length; if (lines <= 1) { alert("最后一条！请留一点数据吧！"); return; } var tip = confirm("确认删除？"); if (tip) { tbody.removeChild(this.parentNode.parentNode); } } } }

js动态生成数据列表相关推荐

js 动态生成html（js根据后台返回数据生成html页面中的table标签）（转义字符）
js 动态生成html table标签中内容js生成 html代码 js代码 js 动态生成html 触发事件传参字符转义 table标签中内容js生成 html代码 <div><t ...
通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
本人公众号上线啦!!! 公众号与博客名一样:没有腹肌的程序猿公众号文章类型:工作上所遇到的需求实现方案分享. 此外也会提供一些数据集供大家使用.(这个还在规划中,毕竟打工人时间挺紧的,哈哈哈哈) 到 ...
2）JS动态生成HTML元素的爬取
2)JS动态生成HTML元素的爬取 import java.util.List;import org.openqa.selenium.By; import org.openqa.selenium.We ...
动态生成数据后绑定事件
HTML代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta chars ...
js动态生成html表格
刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- - 看来还是有很多人不会的啊,于是决定写个博来解救万千小伙伴于水火之中(mdzz) 首先我们要在html里面有 ...
js动态生成echarts图表，并生成图片保存到本地，自定义图片名。
目录一.js动态生成图表 1. 效果图 2. 测试数据 3. 实现代码二.点击下载按钮生成快照 - 图片路径 1. 效果图 2. 实现代码三. 保存图片到本地 1. 效果图 2. 代码实现一. ...
react将表格动态生成视频列表【代码】【案例】
只需要创建一个表格,id为videos,react就能将这个表格转换成视频列表,并点击自动播放 index.html <!DOCTYPE html> <html><hea ...
写一个静态HTML页面，直接写HTML代码和用JS动态生成代码，哪种方式要好
如果写一个静态HTML页面,直接写HTML代码和用JS动态生成代码,哪种方式要好点?为什么? 不考虑人力因素(手写HTML太费时间排除),请从读取和解析或者其他的角度分析.谢谢添加评论分享按投票 ...
cesium + kriging.js动态生成克里金图
cesium + kriging.js动态生成克里金图 kriging.js GIThub地址 :: https://github.com/oeo4b/kriging.js/blob/master/k ...

js动态生成数据列表

js动态生成数据列表相关推荐

最新文章

热门文章