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不是基础的基础
Dec 24 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
Javascript中replace()小结
Sep 30 Javascript
基于JavaScript实现瀑布流布局
Aug 15 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
JS前端轻量fabric.js系列之画布初始化
Aug 05 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安全编程之加密功能
2006/10/09 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
JavaScript中的闭包
2016/02/24 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
Python中字符编码简介、方法及使用建议
2015/01/08 Python
python matplotlib中文显示参数设置解析
2017/12/15 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
意大利男装网店:Vrients
2019/05/02 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
How to spawning asynchronous work in J2EE
2016/08/29 面试题
大学应届生求职简历的自我评价
2013/10/08 职场文书
日语系毕业生推荐信
2013/11/11 职场文书
应届护士推荐信
2013/11/16 职场文书
给客户的道歉信
2014/01/13 职场文书
《童趣》教学反思
2014/02/19 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技