查看本章节

查看作业目录

需求说明：

在页面上绘制一张表格，使用 DOM 节点的动态添加和删除向表格中插入数据，点击表格每行后的“删除”超链接，使用 DOM 节点的删除操作将对应的行数据删除

  • 在文本输入框中输入姓名、年龄、班级和手机号，并选择性别
  • 点击“插入数据”按钮，将输入框中的数据插入到表格中，表格中的数据将增加一条
  • 点击表格中每条数据后的“删除”超链接，将删除该条数据，表格中的数据将减少一条

实现思路：

  1. 在页面中绘制表格，并添加 4 条虚拟数据，在每条数据后使用超链接，并且添加超链接的点击事件
  2. 在页面中添加文本输入框和选项菜单，并提示用户输入，添加“插入数据”按钮，并添加点击事件
  3. 在“插入数据”按钮的事件处理函数中，使用 document 对象的 getElementById、getElementsByTagName等属性获取输入框的值
  4. 使用 createElement 创建元素，使用 innerHTML 为元素设置文本，使用 appendChild 将创建的元素添加到 table 中
  5. 在“删除”超链接的事件处理函数中，获取超链接的父节点 td，继续获取父节点 tr，再获取父节点 table，然后将 table 节点中的 tr 节点删除

实现代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<table border="1" id="tb">

			<tr>

				<th>姓名</th>

				<th>性别</th>

				<th>年龄</th>

				<th>班级</th>

				<th>电话</th>

				<th>操作</th>

			</tr>

			<tr>

				<td>张三</td>

				<td>男</td>

				<td>25</td>

				<td>软件1班</td>

				<td>138xxxx0987</td>

				<td><a href="#" onclick="del(this)">删除</a></td>

			</tr>

			<tr>

				<td>李四</td>

				<td>女</td>

				<td>24</td>

				<td>软件2班</td>

				<td>136xxxx8766</td>

				<td><a href="#" onclick="del(this)">删除</a></td>

			</tr>

			<tr>

				<td>王五</td>

				<td>男</td>

				<td>26</td>

				<td>计科1班</td>

				<td>199xxxx8867</td>

				<td><a href="#" onclick="del(this)">删除</a></td>

			</tr>

			<tr>

				<td>赵六</td>

				<td>女</td>

				<td>23</td>

				<td>计科2班</td>

				<td>188xxxx9965</td>

				<td><a href="#" onclick="del(this)">删除</a></td>

			</tr>

		</table>

		<p>

			<input type="text" id="name" placeholder="请输入姓名"/>

			<select>

				<option>男</option>

				<option>女</option>

			</select>

			<input type="text" id="age" placeholder="请输入年龄" />

			<input type="text" id="cls" placeholder="请输入班级" />

			<input type="text" id="mobile" placeholder="请输入手机号" />

			<input type="button" value="插入数据" onClick="insert()" />

		</p>

		<script type="text/javascript">

			function insert(){

				var sel=document.getElementsByTagName("select")[0];

				var gender=sel.options[sel.selectedIndex].text;

				var age=document.getElementById("age").value;

				var cls=document.getElementById("cls").value;

				var mobile=document.getElementById("mobile").value;

				var name=document.getElementById("name").value;

				var arrays=new Array(name,gender,age,cls,mobile);

				var tb=document.getElementById("tb");

				var cols=tb.getElementsByTagName("th");

				var newtr=document.createElement("tr");

				for (var i=0;i<cols.length;i++) {

					if(i==cols.length-1) {

						var td=document.createElement("td");

						var a=document.createElement("a");

						a.innerHTML="删除";

						a.onclick=function(){

							a.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode);

						}

						a.setAttribute("href","#");

						td.appendChild(a);

						newtr.appendChild(td);

					}else{

						var td=document.createElement("td");

						td.innerHTML=arrays[i];

						newtr.appendChild(td);

					}

				}

				tb.appendChild(newtr);

				console.log(newtr)

			}

			function del(obj){

				var tr=obj.parentNode.parentNode;

				if (tr!=null) {

					tr.parentNode.removeChild(tr);

				}

			}

		</script>

	</body>

</html>

在页面上绘制一张表格，使用 DOM 节点的动态添加和删除向表格中插入数据，点击表格每行后的“删除”超链接的更多相关文章

  1. 如果dom节点是动态添加进页面的，在页面节点绑定事件如何解决的问题。

    如果dom节点是动态添加进页面,想在节点绑定事件,传统的做法就是遍历节点,但会出现问题,也肯能有其他的办法,突然想到 可以依据事件冒泡,这样就不惧页面后添加节点而不响应事件的问题.比较结实.示例代码如 ...

  2. c#导出ListView中的数据到Excel表格

    1.添加组件:Microsoft.Office.Interop.Excel 步骤:右键点击“引用”--->添加引用--->COM--->Microsoft.Office.Intero ...

  3. jstl-将List中的数据展示到表格中

    功能: 使用jstl将List中的数据动态展示到Jsp表格中,并实现隔行换色功能. 效果图: Jsp代码: <%@ page import="java.util.ArrayList&q ...

  4. Raphaël 是一个小型的 JavaScript 库，用来简化在页面上显示向量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。

    点这里 在线效果演示:http://raphaeljs.com/pie.html http://raphaeljs.com github: https://github.com/DmitryBaran ...

  5. 在java中实现数据导入excel表格中

    1.首先前端代码如下: 一个导出按钮:<input id="export" class="btn btn-primary" type="butt ...

  6. JSP+JDBC实现在可视化页面中插入数据到SQL数据库

    原创 本篇博客创建一个如下图所示的JSP页面,将用户填入的数据插入到对应的数据库中. JSP页面代码: <%@ page language="java" contentTyp ...

  7. Markdown中插入复杂的合并表格方法

    由于Markdown自身的语法限制,不能直接插入有合并单元格的复杂表格. 姓名 学号 专业 张三 2018123456 计算机 赵四 2018222356 自动化 李六 2018666666 信息工程 ...

  8. hive向表格中插入数据并分析语句

    1,---导入mds_imei_month_info ; //最大的动态分区表 set hive.support.concurrency=false; //是否支持并发 ; //each mapper ...

  9. [译]使用Continuous painting mode来分析页面的绘制状态

    Chrome Canary(Chrome “金丝雀版本”)目前已经支持Continuous painting mode,用于分析页面性能.这篇文章将会介绍怎么才能页面在绘制过程中找到问题和怎么利用这个 ...

随机推荐

  1. C++基本函数的调用优化（构造、拷贝构造、赋值）

    合理的函数可提升时间和空间的利用率 //Test1.h #include<iostream> using namespace std; struct ST { private: int a ...

  2. 【STM32】使用SDIO进行SD卡读写，包含文件管理FatFs（四）-介绍库函数，获取一些SD卡的信息

    其他链接 [STM32]使用SDIO进行SD卡读写,包含文件管理FatFs(一)-初步认识SD卡 [STM32]使用SDIO进行SD卡读写,包含文件管理FatFs(二)-了解SD总线,命令的相关介绍 ...

  3. 【Python】【Module】json and pickle

    Python中用于序列化的两个模块 json     用于[字符串]和 [python基本数据类型] 间进行转换 pickle   用于[python特有的类型] 和 [python基本数据类型]间进 ...

  4. 阿里云esc 安装 mysql5.7.27

    1. 下载:  wget  http://repo.mysql.com/mysql57-community-release-el7-10.noarch.rpm 2. 安装: (1) yum -y in ...

  5. JS中操作JSON总结

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

  6. 解决tensorflow和keras版本不相匹配的问题

    查看安装版本 pip list https://docs.floydhub.com/guides/environments/ 查看对应版本 我感觉是我tensorflow版本装太高了,keras没有

  7. 【Vulfocus解题系列】手把手教你使用Vulfocus公开靶场对Apache Log4j2远程命令执行漏洞复现

    前言 关于这个漏洞,啥都不用说了,直接发车. 工具下载 JNDIExploit:https://github.com/0x727/JNDIExploit 复现过程 启动靶场环境 直接用vulfocus ...

  8. 02 - Vue3 UI Framework - 顶部边栏

    顶部边栏比较简单,而且首页和文档页都需要,所以我们先从顶部边栏做起 前文回顾点击 这里 返回阅读列表点击 这里 初始化 首先,在 components 文件夹下,创建一个 vue 组件,命名为 Top ...

  9. dart系列之:浏览器中的舞者,用dart发送HTTP请求

    目录 简介 发送GET请求 发送post请求 更加通用的操作 总结 简介 dart:html包为dart提供了构建浏览器客户端的一些必须的组件,之前我们提到了HTML和DOM的操作,除了这些之外,我们 ...

  10. python函数概念

    函数介绍 函数就类似与一个工具,作用就是在有需求时可以直接使用. 函数作用 1.精简代码,不需要重复写代码. 2.提高代码兼容性 3.提供返回值 函数语法结构 def 函数名(参数1, 参数2): & ...