WebAPI(part10)--动态生成表格

学习笔记，仅供参考，有错必究

文章目录

动态生成表格

动态生成表格

从本地取到数据，动态生成表格，并添加删除操作.

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><meta name="description" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href=""></head><body><table cellspacing="0"><tr><th>姓名</th><th>科目</th><th>成绩</th><th>操作</th></tr></table><script>var dataset = [{name: '羊羊',subject: '数据科学',score: 99},{name: '猪猪',subject: '统计学',score: 95},{name: '猫猫',subject: '最优化',score: 100},{name: '狗崽子',subject: '可视化',score: 59},];// 获取tbodyvar tbody = document.querySelector("tbody");for(var i = 0; i < dataset.length; i++) {// 创建 tr 标签(行)var tr = document.createElement("tr");tbody.appendChild(tr);// 在行里创建单元格 tdfor (var k in dataset[i]) {var td = document.createElement("td");td.innerHTML = dataset[i][k];tr.appendChild(td);}// 创建删除单元格var td = document.createElement("td");td.innerHTML = '<a href="javascript:;">' + '删除' + '</a>';tr.appendChild(td);}// 删除操作var as = document.querySelectorAll ('a');for(var i=0; i < as.length; i++) {as[i].onclick = function() {tbody.removeChild(this.parentNode.parentNode);}}</script></body>
</html>

结果展示：

WebAPI(part10)--动态生成表格相关推荐

一段动态生成表格的JSP代码讲解
一段动态生成表格的JSP代码讲解 <table border="1" width="600px" align="center"> ...
JS实现动态生成表格并提交表格数据向后端表格中数据转为json
原文地址需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面d ...
应用Java程序片段动态生成表格
通过Jsp页面动态来显示数据库中的数据,在根据条件进行查询时,将调查结果显示在jsp页面中,使用java程序片段(Scriptlet)动态生成表格在jsp文件中,可以在"<%&quo ...
Extjs 动态生成表格
在web显示数据时,会遇到grid的列数和行数不确定的这种情况.如何来根据数据动态的创建表格呢? Extjs 的json data给我们带来了一个很好的比较简单的方法. 要创建一个grid需要确定它的 ...
动态生成表格呈现还是将表格直接绑定gridview等控件呈现的开发方式选择依据...
动态生成表格呈现还是将表格直接绑定gridview等控件呈现的开发方式选择依据:由存储过程决定,如果编写的存储过程可以生成需要呈现的表格则直接绑定,否则要动态生成表格转载于:https://www. ...
动态生成表格、隐藏表格、选中删除任意行、jquery、输入验证
PS: 游戏公司后台开发,工作模式:996. 于是写博客这事也荒废了.... 想想还是写一点吧. 呵呵,请不要笑话我注释写这么多,习惯了,我上班写代码都是有注释的. 我建两个相似的表是为了,给后台使用 ...
django通过ajax请求接口返回多条数据，并动态生成表格，请求表单后将表格数据并入库
一.最近在做接口相关的开发,需求是这样的,通过一个接口所需要传递的参数,调用接口后,处理接口响应的参数,返回多条数据,并动态生成表格,请求表单后将表格的数据入库,下面是我改过的代码,跟实际代码有些出入 ...
javascript案例：动态生成表格
js案例:动态生成表格一.文字梳理 * 创建一个页面:两个输入框和一个按钮 * 第一步:得到输入的行和列的值 * 第二步:生成表格 - 循环行 - 在行里面循环单元格 * 第三步:把表格(表格放到变 ...
JSTL标签库动态生成表格
项目中遇到一个动态生成表格的问题,由于表格的行和列都不是固定的,而是从数据库中取得的,因此需要动态的创建表格. 由于规范中要求使用JSTL标签库,避免JSP页面冗余java代码,而我的数据库暂时又连不 ...

WebAPI(part10)--动态生成表格

文章目录

动态生成表格

WebAPI(part10)--动态生成表格相关推荐

最新文章

热门文章