查看本章节

查看作业目录

需求说明：

在页面上绘制一张表格，使用 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. SpringMVC注解详情

    @Component.@Repository @Service.@Controller 看字面含义,很容易却别出其中三个: @Controller 控制层,就是我们的action层 @Service ...

  2. Linux运维实战之磁盘分区、格式化及挂载（一）

    在网络系统中,磁盘和文件系统管理是两个非常基本.同时也是非常重要的管理任务,特别是文件系统管理,因为它与用户权限和整个网络系统的安全息息相关.本次博文的主题是关于Linux系统中磁盘分区.格式化及挂载 ...

  3. Google Guava 常用集合方法

    /** * Author: momo * Date: 2018/6/7 * Description: */ public class ListTest { public static void mai ...

  4. SpringMVC中@RestController和@Controller的区别

    在使用SpringMVC时,对于Controller中的注解@RestController和@Controller需要我们区分清楚 @RestController注解相当于@ResponseBody和 ...

  5. 使用$.ajax方式实现页面异步访问，局部更新的效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. windows下安装linux虚拟机（wsl2），并安装docker。

    一.windows terminal(重要工具,但也可以不装) 这是微软官方推荐的终端工具,类似mac的iterm2,可同时开启多个终端,最开始默认有power shall,cmd,可下载gsudo集 ...

  7. selenium: where to get ChromeDriver?

    address: http://npm.taobao.org/mirrors/chromedriver

  8. Docker从入门到精通（五）——Dockerfile

    Dockerfile 简单来说就是一个包含用于组合镜像的命令的文本文档,Docker 通过读取 Dockerfile 中的指令就可以按步骤生成镜像,那么在制作镜像之前,我们先了解一下镜像的原理. 1. ...

  9. Android系统编程入门系列之硬件交互——多媒体展示

    前两篇文章通过麦克风硬件和摄像头硬件分别采集音频和视频的多媒体数据,在得到的多媒体数据通常是以编码文件的格式存储,在用户需要展示时,可通过设备的内置扩音器或蓝牙耳机等硬件播放音频,通过设备的显示屏或外 ...

  10. 项目管理的基本概念（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 关于项目管理的基本概念,我看了好久,也迷糊了好久--原谅我实在不是个善于理解概念的妖,最终我决定,就记些简单的东东吧,具体 ...