zoukankan      html  css  js  c++  java
  • 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 {  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); } } } }
  • 相关阅读:
    hdu 3666 差分约束系统
    hdu 1198农田灌溉
    常微分方程(阿諾爾德) Page 45 相空間,相流,運動,相曲線 註記
    高等微積分(高木貞治) 1.4節 例2
    常微分方程(阿諾爾德) Page 45 相空間,相流,運動,相曲線 註記
    解析函數論 Page 29 命題(2) 函數模的有界性
    高等微積分(高木貞治) 1.4節 例2
    解析函數論 Page 29 命題(1) 有界閉集上的一致連續性
    解析函數論 Page 29 命題(3) 模的下界的可達性
    解析函數論 Page 29 命題(2) 函數模的有界性
  • 原文地址:https://www.cnblogs.com/zhaoyingjie/p/5963096.html
Copyright © 2011-2022 走看看