【JAVAScript】实例 ——创建表格并删除(以及知识扩展)

2023-10-29 22:50

本文主要是介绍【JAVAScript】实例 ——创建表格并删除(以及知识扩展),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

JAVAScript动态创建表格并删除

本次主要介绍两个实用的关于建立动态数组的方法:JOSN和for in
以及上次博客提到的获取节点的实例方法

文章目录

  • JAVAScript动态创建表格并删除
  • 一、JSON语法
  • 二、for in
  • 三、实例
  • 总结


一、JSON语法

var date = [{name:'Jone',subject:'javeScript',grades:100},{name:'Mary',subject:'java',grades:58},{name:'Grade',subject:'C',grades:98},{name:'Sraz',subject:'C#',grades:99},{name:'张锦怡',subject:'物联网工程',grades:'100'}];

二、for in

for…in语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性,包括继承的可枚举属性。

var obj = {a:1, b:2, c:3};for (var prop in obj) {console.log("obj." + prop + " = " + obj[prop]);
}// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

可以得出prop为属性,obj[prop]为属性值

三、实例

基本HTML如下,布局就不再过多讲解
在这里插入图片描述
思路:先创建对应date[n]的行数,在根据对于属性的个数创建列。剩下的一列创建删除按钮

 var tbody = document.querySelector('tbody');//根据date的数组长度创建相应的行数for(var i = 0; i < date.length; i++){var tr = document.createElement('tr');tbody.appendChild(tr);//根据属性值按每个单元行创建单元,总结为创建列数for(var k in date[i]){var td = document.createElement('td');//将属性值赋给单元格td.innerHTML = date[i][k];tr.appendChild(td);}//添加最后一列的删除栏var td = document.createElement('td');td.innerHTML = "<a href = 'javascript:;''>删除</a>"tr.appendChild(td);}//点击事件var a = document.getElementsByTagName('a');for(var j = 0; j < a.length; j++){a[j].addEventListener('click',function(){//删除tbody里的a的父亲(tr)的父亲(td)tbody.removeChild(this.parentNode.parentNode)})}    

错误总结:在这里插入图片描述
1这个错误是有数组越界产生的,在写监听函数时一定要注意数组越界问题

2当触发事件失效时:关注tbody.removeChild(this.parentNode.parentNode)是一定要注意this的用法和移除事件到底是说明

3 js的使用如果在页面元素未加载前容易出现报错问题,这个时候应该考虑使用window.onload的用法了(下节细讲)

总结

提示:使用了JSON和for in 大大简化程序(但也可以使用方法函数和if-else来做)。这个实例强化了获取元素和监听函数的用法。有错误还望指出

这篇关于【JAVAScript】实例 ——创建表格并删除(以及知识扩展)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/303884

相关文章

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注

Java操作Word文档的全面指南

《Java操作Word文档的全面指南》在Java开发中,操作Word文档是常见的业务需求,广泛应用于合同生成、报表输出、通知发布、法律文书生成、病历模板填写等场景,本文将全面介绍Java操作Word文... 目录简介段落页头与页脚页码表格图片批注文本框目录图表简介Word编程最重要的类是org.apach

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP

SpringBoot+Docker+Graylog 如何让错误自动报警

《SpringBoot+Docker+Graylog如何让错误自动报警》SpringBoot默认使用SLF4J与Logback,支持多日志级别和配置方式,可输出到控制台、文件及远程服务器,集成ELK... 目录01 Spring Boot 默认日志框架解析02 Spring Boot 日志级别详解03 Sp

java中反射Reflection的4个作用详解

《java中反射Reflection的4个作用详解》反射Reflection是Java等编程语言中的一个重要特性,它允许程序在运行时进行自我检查和对内部成员(如字段、方法、类等)的操作,本文将详细介绍... 目录作用1、在运行时判断任意一个对象所属的类作用2、在运行时构造任意一个类的对象作用3、在运行时判断

java如何解压zip压缩包

《java如何解压zip压缩包》:本文主要介绍java如何解压zip压缩包问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java解压zip压缩包实例代码结果如下总结java解压zip压缩包坐在旁边的小伙伴问我怎么用 java 将服务器上的压缩文件解压出来,

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

Spring WebFlux 与 WebClient 使用指南及最佳实践

《SpringWebFlux与WebClient使用指南及最佳实践》WebClient是SpringWebFlux模块提供的非阻塞、响应式HTTP客户端,基于ProjectReactor实现,... 目录Spring WebFlux 与 WebClient 使用指南1. WebClient 概述2. 核心依

Mysql实现范围分区表(新增、删除、重组、查看)

《Mysql实现范围分区表(新增、删除、重组、查看)》MySQL分区表的四种类型(范围、哈希、列表、键值),主要介绍了范围分区的创建、查询、添加、删除及重组织操作,具有一定的参考价值,感兴趣的可以了解... 目录一、mysql分区表分类二、范围分区(Range Partitioning1、新建分区表:2、分