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 相关文章推荐
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
微信jssdk用法汇总
Jul 16 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
js的三种继承方式详解
Jan 21 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
vue从零实现一个消息通知组件的方法详解
Mar 16 Javascript
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 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
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
js文字滚动停顿效果代码
2008/06/28 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
Python CSV模块使用实例
2015/04/09 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
python中map的基本用法示例
2018/09/10 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
关于赌博的检讨书
2014/01/24 职场文书
元旦寄语大全
2014/04/10 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
简单的辞职信模板
2015/05/12 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
新手初学Java网络编程
2021/07/07 Java/Android
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL