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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
基于jquery的气泡提示效果
May 31 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
javascript操作cookie
Jan 17 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
原生JS实现相邻月份日历
Oct 13 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 cookie的操作实现代码(登录)
2010/12/29 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
Three.js学习之网格
2016/08/10 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
讲解Python中的标识运算符
2015/05/14 Python
Python函数式编程指南(四):生成器详解
2015/06/24 Python
深入浅析Python的类
2018/06/22 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
对Python 语音识别框架详解
2018/12/24 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
python实现IOU计算案例
2020/04/12 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
程序员经常用到的UNIX命令
2015/04/13 面试题
教师评优的个人自我评价分享
2013/09/19 职场文书
品酒会策划方案
2014/05/26 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
商务邀请函
2015/01/30 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
MySQL去除密码登录告警的方法
2022/04/20 MySQL