我们通常会使用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动态生成数据列表的更多相关文章

  1. 抓取Js动态生成数据且以滚动页面方式分页的网页

    代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...

  2. 爬虫案例(js动态生成数据)

    需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...

  3. 抓取js动态生成数据

    最近在抓数据,一般的网页数据抓取相对容易一些,今天在抓电视猫的节目单,发现有些数据时抓取不到的,Java端得到的HTML文件里面没有某一段代码,查了很多资料,发现说是js动态生成的数据,无法直接抓取, ...

  4. js动态生成数据的抓取

    需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...

  5. js动态生成下拉列表

    经常需要用到js动态生成下拉列表的功能,记录下来备用. 示例需求:通过ajax请求,从后台获取用户姓名列表,并添加到下拉列表中.js代码如下: function getNameList(){ //如果 ...

  6. 2）JS动态生成HTML元素的爬取

    2)JS动态生成HTML元素的爬取 import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.W ...

  7. react将表格动态生成视频列表【代码】【案例】

    只需要创建一个表格,id为videos,react就能将这个表格转换成视频列表,并点击自动播放 index.html <!DOCTYPE html> <html> <he ...

  8. 抓取js动态生成的数据分析案例

    需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...

  9. JS动态生成表格后 合并单元格

    JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...

随机推荐

  1. 利用NTFS交换数据流隐藏文件

    利用NTFS交换数据流隐藏文件 发表于 2012 年 12 月 15 日 由 晴刃 这篇文章介绍一下Windows的NTFS文件系统的ADS(alternate data streams,交换数据流) ...

  2. unity3d打包和包的使用

    打包: ①Assets下新建文件夹Editor和steamingAssets ②对选定文件打包: using UnityEngine; using UnityEditor; using System. ...

  3. SDIO接口

    SDIO卡是在SD内存卡接口的基础上发展起来的接口,SDIO接口兼容以前的SD内存卡,并且可以连接SDIO接口的设备,目前根据SDIO协议的SPEC,SDIO接口支持的设备总类有蓝牙,网卡,电视卡等. ...

  4. Calling startActivity() from outside of an Activity context requires the FLAG_ACTIVITY_NEW_TASK flag. Is this really what you want?

    Calling startActivity() from outside of an Activity  context requires the FLAG_ACTIVITY_NEW_TASK fla ...

  5. 2016 - 1 - 21 RunloopMode中的Source 与Observer

    一:CFRunLoopSourceRef 1.CFRunLoopSourceRef是事件源(输入源) 2.按照官网文档分为,Source可以分为以下几类: 2.1 Porl - Based Sourc ...

  6. 10年山东省赛-E-最短路

    题目连接:http://acm.sdut.edu.cn/sdutoj/showproblem.php?pid=2155&cid=1430 题意:输入一个n个节点,m条边的图,然后k条记录,纪录 ...

  7. 自从学了SQL编程，哪里不会点哪里！！！

    在学习SQL编程前,先给大家分享几个段子吧,咱先乐呵乐呵! <桃花庵--程序员版> 写字楼里写字间,写字间中程序员:程序人员写程序,又将程序换酒钱: 酒醒只在屏前坐,酒醉还来屏下眠:酒醉酒 ...

  8. Nodejs创建https服务器(Windows 7)

    为了实验一下WebRTC,搭了个简单的https服务器.说说步骤: 生成OpenSSL证书 使用Nodejs的https模块建立服务器 OpenSSL 证书 我机子Windows 7,安装了Cygwi ...

  9. javascript:;与javascript:void(0)使用介绍

    有时候我们在编写js过程中,需要触发事件而不需要返回值,那么就可能需要这样的写法 href=”#”,包含了一个位置信息.默认的锚是#top,也就是网页的上端,当连续快速点击此链接时会导致浏览器巨慢甚至 ...

  10. Windows Phone 8.1 Page transitions

    original: http://www.visuallylocated.com/post/2014/06/24/Page-transitions-and-animations-in-Windows- ...