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 相关文章推荐
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
js中有关IE版本检测
Jan 04 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 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
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
非常实用的php验证码类
2016/05/15 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
js 操作符汇总
2014/11/08 Javascript
javascript中Object使用详解
2015/01/26 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
旅游管理专业生自荐信范文
2014/01/02 职场文书
公积金单位接收函
2014/01/11 职场文书
成绩单公证书
2014/04/10 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
小学生家长意见
2015/06/03 职场文书
养成教育主题班会
2015/08/13 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python
教你利用python实现企业微信发送消息
2021/05/23 Python
Python上下文管理器Content Manager
2021/06/26 Python
Redis基本数据类型Set常用操作命令
2022/06/01 Redis