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 相关文章推荐
javascript的对话框详解与参数
Mar 08 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
angularjs模态框的使用代码实例
Dec 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
PHPLog php 程序调试追踪工具
2009/09/09 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python面向对象编程基础解析(一)
2017/10/26 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
对pandas中apply函数的用法详解
2018/04/10 Python
python实现桌面壁纸切换功能
2019/01/21 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
积极分子思想汇报
2014/01/04 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
Java实现简单小画板
2022/06/10 Java/Android