JavaScript实现网页动态生成表格

作者:我是Dreamer啊 时间:2024-04-16 09:24:00 

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>

来源:https://blog.csdn.net/weixin_42579348/article/details/109992409

标签:js,表格
0
投稿

猜你喜欢

  • 如何使用PyCharm将代码上传到GitHub上(图文详解)

    2021-02-18 05:13:31
  • VUE-ElementUI 时间区间选择器的使用

    2024-05-09 15:12:21
  • 通过python爬虫赚钱的方法

    2023-04-27 11:48:17
  • js数组的基本用法及数组根据下标(数值或字符)移除元素

    2024-04-10 10:40:26
  • Python实现的建造者模式示例

    2023-06-02 07:17:00
  • Python SMTP发送电子邮件的示例

    2023-09-26 17:57:24
  • Python使用Rich type和TinyDB构建联系人通讯录

    2023-07-13 10:33:22
  • Python实现自定义读写分离代码实例

    2023-04-19 14:34:57
  • vue项目中Eslint校验代码报错的解决方案

    2024-05-10 14:09:18
  • Python中集合创建与使用详解

    2022-04-30 05:29:42
  • Python中xlsx文件转置操作详解(行转列和列转行)

    2022-02-18 03:36:34
  • JavaScript实现动态时钟效果

    2024-04-16 10:27:04
  • ES6中的Promise代码详解

    2024-04-18 09:44:19
  • Python数学建模StatsModels统计回归模型数据的准备

    2021-10-08 09:19:24
  • python 进程间数据共享multiProcess.Manger实现解析

    2021-03-25 14:06:53
  • Python+OpenCV人脸检测原理及示例详解

    2021-07-31 19:31:51
  • 探索webpack模块及webpack3新特性

    2024-05-21 10:13:48
  • Update 语句

    2009-06-22 12:52:00
  • 判断 iframe 是否加载完成的完美方法

    2009-09-24 13:35:00
  • Python利用watchdog模块监控文件变化

    2023-10-23 22:27:22
  • asp之家 网络编程 m.aspxhome.com