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 smipleChart 简单图标类
Jan 12 Javascript
Prototype源码浅析 String部分(二)
Jan 16 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
vue计算属性和监听器实例解析
May 10 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
浅入深出Vue之组件使用
Jul 11 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实现下载限制速度示例分享
2014/02/13 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
js实现表格筛选功能
2017/01/18 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
Vue.js划分组件的方法
2017/10/29 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
python 自动提交和抓取网页
2009/07/13 Python
Python利用IPython提高开发效率
2016/08/10 Python
详解python3百度指数抓取实例
2016/12/12 Python
详解Python的循环结构知识点
2019/05/20 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
python如何修改文件时间属性
2021/02/05 Python
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
会计顶岗实习心得
2014/01/25 职场文书
协议书范本
2014/04/23 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
Python实现科学占卜 让视频自动打码
2022/04/09 Python