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 相关文章推荐
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 Javascript
jQuery 事件队列调整方法
Sep 18 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
JS实现秒杀倒计时特效
Jan 02 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 查找字符串常用函数介绍
2012/06/07 PHP
php查询ip所在地的方法
2014/12/05 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
Python中字符串的格式化方法小结
2016/05/03 Python
python实现按任意键继续执行程序
2016/12/30 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
如何使用Python 打印各种三角形
2019/06/28 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
会计工作心得体会
2014/01/13 职场文书
网络书店创业计划书
2014/02/07 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
先进工作者推荐材料
2014/12/23 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
学校党员干部承诺书
2015/05/04 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
入党申请书格式
2019/06/20 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript