JavaScript实现网页动态生成表格


Posted in Javascript onNovember 25, 2020

JavaScript(JS)网页?动态生成表格,供大家参考,具体内容如下

JavaScript实现网页动态生成表格

在网页中,动态生成列表的内容,将数组中的object加入到列表中(没学到数据库)。在HTML中创建thead,然后通过JavaScipt动态生成tbody。并且在每行最后申城一个单元格,加入删除操作,点击删除可以删除此行。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>动态生成表格</title>
 <style>
  table {
   border-collapse: collapse;
   margin-top: 200px;
   margin-left: 500px;
  }
  table th{
   border: 1px solid black;
   width: 80px;
   height: 40px;
   text-align: center;
   background-color: cornsilk;
  }

  table td{
   
   border: 1px solid black;
   width: 80px;
   height: 40px;
   text-align: center;

  }

 </style>
</head>
<body>
 <table>
  <thead>
   <tr>
    <th>姓名</th>
    <th>科目</th>
    <th>成绩</th>
    <th>操作</th>
   </tr>
  </thead>
  <tbody>
   <!-- <tr>
    <td>张三</td>
    <td>JavaScript</td>
    <td>100</td>
    <td><a href="JavaScript:;" >删除</a></td>
   </tr>
   <tr>
    <td>李四</td>
    <td>JavaScript</td>
    <td>95</td>
    <td><a href="JavaScript:;" >删除</a></td>
   </tr>
   <tr>
    <td>王五</td>
    <td>JavaScript</td>
    <td>98</td>
    <td><a href="JavaScript:;" >删除</a></td>
   </tr>
   <tr>
    <td>赵六</td>
    <td>JavaScript</td>
    <td>91</td>
    <td><a href="JavaScript:;" >删除</a></td>
   </tr> -->
  </tbody>
 </table>
 <script>

  //加入数据
  var datas = [
   {
    name:'张三',
    subject:'JavaScript',
    score:'100'
   },
   {
    name:'李四',
    subject:'JavaScript',
    score:'95'
   },
   {
    name:'王五',
    subject:'JavaScript',
    score:'98'
   },
   {
    name:'赵六',
    subject:'JavaScript',
    score:'92'
   }
  ];
  //创建行,有几个人就创建几行
  var tbody =document.querySelector('tbody')
  for(var i = 0 ; i < datas.length ; i++){
   //创建行
   var tr = document.createElement('tr');
   tbody.appendChild(tr);
   //创建单元格
   for (var k in datas[i] ){
    var td = document.createElement("td");
    td.innerText = datas[i][k];
    tr.appendChild(td);
   }
   //创建删除单元格
   var td = document.createElement('td');
   td.innerHTML = '<a href="JavaScript:;" >删除</a>';
   tr.appendChild(td);
  }
  var as = document.querySelectorAll('a');
  for (var i = 0 ; i <as.length ; i++){
   as[i].onclick = function(){
    //点击a 删除当前行
    tbody.removeChild(this.parentNode.parentNode);
   }
  }

  // for (var k in Obj){
  //  k 得到的是属性名
  //  dbj[k] 得到的是属性值
  // }
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
Ajax同步与异步传输的示例代码
Nov 21 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
jQuery文字轮播特效
Feb 12 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 #Vue.js
JavaScript实现HTML导航栏下拉菜单
Nov 25 #Javascript
vue打开其他项目页面并传入数据详解
Nov 25 #Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 #Vue.js
js实现筛选功能
Nov 24 #Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 #Javascript
JavaScript实现移动端拖动元素
Nov 24 #Javascript
You might like
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
js以对象为索引的关联数组
2010/07/04 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
Python实用日期时间处理方法汇总
2015/05/09 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
python tkinter组件摆放方式详解
2019/09/16 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
运动会入场词50字
2014/02/20 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
求职信的正确写法
2014/07/10 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
班主任2015新年寄语
2014/12/08 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android