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 相关文章推荐
图像替换新技术 状态域方法
Jan 28 Javascript
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 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获取MAC地址的函数代码
2011/09/11 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
Python3内置模块random随机方法小结
2019/07/13 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
Python创建数字列表的示例
2019/11/28 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
如何通过python计算圆周率PI
2020/11/11 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
大码女装:Ulla Popken
2019/08/06 全球购物
Linux的主要特性
2016/09/03 面试题
西式婚礼证婚词
2014/01/12 职场文书
妈妈的账单教学反思
2014/02/06 职场文书
三方合作协议书范本
2014/04/18 职场文书
实习护士自荐信
2014/06/21 职场文书
金融管理专业求职信
2014/07/10 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
党员发展大会主持词
2015/07/03 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
nginx.conf配置文件结构小结
2022/04/08 Servers
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android