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 异步处理进度条
Apr 01 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
jquery的live使用注意事项
Feb 18 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
微信小程序保持session会话的方法
Mar 20 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来处理多个提交任务
2008/05/08 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
js实现倒计时关键代码
2017/05/05 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
Python模块的加载讲解
2019/01/15 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
电气自动化自荐信
2013/10/10 职场文书
建筑专业毕业生推荐信
2013/11/21 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
网络工程师自荐书范文
2014/04/01 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
食堂管理制度范本
2015/08/04 职场文书
java解析XML详解
2021/07/09 Java/Android