js简单实现自动生成表格功能示例


Posted in Javascript onJune 02, 2020

本文实例讲述了js简单实现自动生成表格功能。分享给大家供大家参考,具体如下:

JS实现自动生成表格

由于自己的算法8太行,所以只能尽量用简单点的方法实现效果

下面直接上代码

<table id="table">
 <thead>
  <td>姓名</td>
  <td>年龄</td>
  <td>身高</td>
 </thead>
 <tbody></tbody>
 </table>
<style>
 .del{
  cursor: pointer;
  color: blue;
 }
 </style>
<script>
 var tableInfo = [
  { 姓名: '张三', 年龄: 20, 身高: 160 },
  { 姓名: '李四', 年龄: 18, 身高: 158 },
  { 姓名: '王二麻子', 年龄: 19, 身高: 180 },
  { 姓名: '孙悟空', 年龄: 100, 身高: 150 },
  { 姓名: '猪八戒', 年龄: 100, 身高: 155 },
  { 姓名: '龟龟', 年龄: 200, 身高: 0.5 }
 ]
  var tr = document.createElement('tr');
  var tdName = document.createElement('td');
  var tdAge = document.createElement('td');
  var tdTall = document.createElement('td');
  var del = document.createElement('span');

  //td赋值为对应的表格信息
  tdName.innerHTML = tableInfo[i].姓名;
  tdAge.innerHTML = tableInfo[i].年龄;
  tdTall.innerHTML = tableInfo[i].身高;
  //设置删除按钮
  del.innerHTML = '删除';
  del.className = 'del';
  //调用创建函数
  createAll(tdName, tdAge, tdTall);

 }
 //创建tr>td 和删除按钮
 function createAll(tdName, tdAge, tdTall) {
  table.appendChild(tr);
  tr.appendChild(tdName);
  tr.appendChild(tdAge);
  tr.appendChild(tdTall);
  tr.appendChild(del);
 }
 //设置删除按钮的点击事件
 var btnDel = document.getElementsByClassName('del');
 for (var i = 0; i < btnDel.length; i++) {
  btnDel[i].onclick = function () {
  //找到删除键的父节点(tr)并移除
  this.parentNode.remove();
  }
 }
 </script>

代码效果:

js简单实现自动生成表格功能示例

如果有什么地方做的不够完善,请多多指教

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js判断变量是否空值的代码
Oct 26 Javascript
js正确获取元素样式详解
Aug 07 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
vue实现前端分页完整代码
Jun 17 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 Javascript
JS中准确判断变量类型的方法
Jun 01 #Javascript
Vuex中的Mutations的具体使用方法
Jun 01 #Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 #Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 #Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 #Javascript
JS如何寻找数组中心索引过程解析
Jun 01 #Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 #Javascript
You might like
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
PHP插入排序实现代码
2013/04/04 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
jquery 事件对象属性小结
2010/04/27 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
Python的Tornado框架异步编程入门实例
2015/04/24 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
Python中常见的数据类型小结
2015/08/29 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
生产内勤岗位职责
2013/12/07 职场文书
比较几种Redis集群方案
2021/06/21 Redis
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript