JavaScript动态生成表格的示例


Posted in Javascript onNovember 02, 2020

要求:

HTML标签只写一行表头
通过JS来写动态的表格(有多少组数据,就自动创建多少行表格)
为学习和演示,采用固定的数据,不涉及调用后台数据

代码实现:
HTML内容:

<table cellspacing="0">
  <thead>
    <tr>
      <th>姓名</th>
      <th>科目</th>
      <th>成绩</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

CSS内容:

table {
  width: 500px;
  margin: 100px auto;
  border-collapse: collapse;
  text-align: center;
}

td,
th {
  border: 1px solid #333;
}

thead tr {
  height: 40px;
  background-color: #ccc;
}

JS内容:

// 1.先准备好学生的数据,用数组形式储存,每个数组元素是一个对象
var datas = [{
  name: '张三',
  subject: 'JavaScript',
  score: 100
}, {
  name: '李四',
  subject: 'JavaScript',
  score: 98
}, {
  name: '王五',
  subject: 'JavaScript',
  score: 99
}, {
  name: '赵六',
  subject: 'JavaScript',
  score: 88
}, {
  name: '哈哈',
  subject: 'JavaScript',
  score: 0
}];
// 2. 往tbody 里面创建行: 有几个人(通过数组的长度)我们就创建几行
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr
  // 1. 创建 tr行
  var tr = document.createElement('tr');
  tbody.appendChild(tr);
  // 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象 datas[i]
  for (var k in datas[i]) { // 里面的for循环管列 td
    // 创建单元格 
    var td = document.createElement('td');
    // 把对象里面的属性值 datas[i][k] 给 td 
    // console.log(datas[i][k]);
    td.innerHTML = datas[i][k];
    tr.appendChild(td);
  }
  // 3. 创建有删除2个字的单元格 
  var td = document.createElement('td');
  td.innerHTML = '<a href="javascript:;" rel="external nofollow" >删除</a>';
  tr.appendChild(td);

}
// 4. 删除操作
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
  as[i].onclick = function() {
    // 点击a删除 当前a所在的行(a父节点的父节点) node.removeChild(child) 
    tbody.removeChild(this.parentNode.parentNode)
  }
}
// for(var k in obj) {
//   k 得到的是属性名
//   obj[k] 得到是属性值
// }

实现效果:

JavaScript动态生成表格的示例

点击删除按钮,相应的行会删除。
点击删除“张三”的数据:

JavaScript动态生成表格的示例

以上就是JavaScript动态生成表格的示例的详细内容,更多关于JavaScript 生成表格的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
详解参数传递四种形式
Jul 21 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
详解Javascript继承的实现
Mar 25 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
JavaScript实现图片放大预览效果
Nov 02 #Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 #Javascript
在antd4.0中Form使用initialValue操作
Nov 02 #Javascript
vue+iview使用树形控件的具体使用
Nov 02 #Javascript
在antd Form表单中select设置初始值操作
Nov 02 #Javascript
react+antd 递归实现树状目录操作
Nov 02 #Javascript
antd form表单数据回显操作
Nov 02 #Javascript
You might like
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
javascript 类定义的4种方法
2009/09/12 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
Python实现端口复用实例代码
2014/07/03 Python
Python模拟登录12306的方法
2014/12/30 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
python numpy 按行归一化的实例
2019/01/21 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
文史专业毕业生自荐信
2013/11/17 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
2014年冬季防火方案
2014/05/21 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技