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 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
Aug 10 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
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
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
YII框架http缓存操作示例
2019/04/29 PHP
基于jQuery的动态表格插件
2011/03/28 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
Python编程修改MP3文件名称的方法
2017/04/19 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
美国时尚在线:Showpo
2017/09/08 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
管理学专业个人求职信范文
2013/09/21 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
星级党支部申报材料
2014/05/31 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
法人身份证明书
2015/06/18 职场文书
怎样写观后感
2015/06/19 职场文书
公司回复函格式
2015/07/14 职场文书
新入职员工工作总结
2015/10/15 职场文书
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js