JS - 生成动态表格

<script>var datas = [{name: '卡卡西',subject: 'JavaScript',grade: 100,}, {name: '鸣人',subject: 'JavaScript',grade: 80,}, {name: '小樱',subject: 'JavaScript',grade: 100,}, {name: '鹿丸',subject: 'JavaScript',grade: 98,}];var tbd = document.querySelector('tbody');// 创建行for (var i = 0; i < datas.length; i++) {var tr = document.createElement('tr');tbd.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);}// 注册删除var as = document.querySelectorAll('a');for (var i = 0; i < as.length; i++) {as[i].onclick = function() {tbd.removeChild(this.parentNode.parentNode);}}</script>

注意：

1. 每行的数据可以放在一个对象里，几个对象放进一个数组里

2. 用createElement()创建行和列

3. 双层for循环，外层循环创建行，内层循环创建列

4. 外层是数组for(var i = 0; i < ...)内层是对象for(var k in ...)

5. 表格的内容，获取对象的属性值obj[k];

? 问题思考？删除操作在动态表格中要放在function外面，否则会自动删除一行，但是在留言案例中，要放在function里面，否则无效。？？？

JS - 生成动态表格相关推荐

JS生成动态表格并为每个单元格添加单击事件的方法
<html><head><title>Demo</title><script>function getColumnDetail(column ...
jQuery生成动态表格
前言工作中常常需要动态的添加或者删除表格行或者列,所以稍微整理了一下,实现了一些比较通用的功能. 效果除表头外,第一行模拟从后台加载的数据,其余的行是动态添加点击保存后,该行自动变成第一行的效果 ...
ThinkPhp使用PHPWord模板类生成动态表格
本文简单介绍如何在ThinkPHP3.2中使用PHPWord根据表格内容,动态生成多行表格. 有关在ThinkPHP3.2中使用PHPWord,可以参考"thinkphp3.2集成phpwo ...
DOM JS实现动态表格
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
原生js实现动态表格分页(封装版)
之前一直用的插件做表格分页,但是不同的场景用到的情况都不同,所以索性用个原生js搞一个封装好的. 后台动态获取数据进行渲染,等页面渲染成功之后在进行分页.数据的获取我用的vue,也可以用ajax等其他 ...
html利用js生成excel表格（html表格标签生成excel）table2excel实例：一表格多sheets
table2excel实例使用插件:table2excel.js 简介:table2excel 可以转换和下载html上的表格,使他成为.xlsx格式,能够被Excel打开实例代码 <hea ...
简单无脑使用 jquery.table2excel.js 生成excel表格
下载 jquery.table2excel.js 下载地址 jquery.table2excel.js 下载后在文件夹中找到js文件用哪个都可以代码: <script src="/P ...
js生成excel表格并下载
<button id="" type="button" class="u-btn normal importBtn" > < ...
使用javascript生成Excel表格（内含实例demo），可下载xlsx.core.min.js、excel.js包
分享一个我的小demo:GuitHub ExcelDownload 实例下载(布局简陋,随便看看就行),喜欢就给个star,哈哈一.生成excel表格的原理打蛇打七寸,擒贼先擒王.通过标题就可以知 ...

JS - 生成动态表格

JS - 生成动态表格相关推荐

最新文章

热门文章