查看本章节

查看作业目录

需求说明：

在页面上绘制一张表格，使用 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. linux修改文件权限命令

    先看个实例: [root@local opt]#ls -al ls -al 命令是列出目录的所有文件,包括隐藏文件.隐藏文件的文件名第一个字符为'.' -rw-r--r--  1 root root  ...

  2. DBMS_RANDOM包详解

    DBMS_RAMDOM包中一共包含9个存储过程和函数,其中6个是现在用的,3个是已经过时的: 当前版本11gR2 每次生成一个随机数oracle都会初始化一个种子,也可以调用seed过程自己初始化一个 ...

  3. Oracle 用户自定义数据类型

    用户自定义数据类型(User-defined Data Type)oracle支持对象类型(Object Type).嵌套类型(Nested Table Type)和可变数组类型(Varray Dat ...

  4. 模板方法模式(Template Method Pattern)——复杂流程步骤的设计

    模式概述 在现实生活中,很多事情都包含几个实现步骤,例如请客吃饭,无论吃什么,一般都包含点单.吃东西.买单等几个步骤,通常情况下这几个步骤的次序是:点单 --> 吃东西 --> 买单. 在 ...

  5. centos7部署二进制mysql-5.6

    目录 一.环境声明 二.程序部署 一.环境声明 [mysql-Server] 主机名 = host-1 系统 = centos-7.3 地址 = 1.1.1.1 软件 = mysql-5.6.39 3 ...

  6. 如何查看电脑IP地址

    如何查看电脑的IP地址 win+r输入cmd回车,然后输入:ipconfig回车

  7. 转：KVC 与 KVO 理解

    KVC 与 KVO 理解 On 2012 年 6 月 7 日, in iPhone, by donly KVC 与 KVO 是 Objective C 的关键概念,个人认为必须理解的东西,下面是实例讲 ...

  8. 虎符2021线下赛pwn writeup

    jdt 一个图书管理系统,但并不是常规的堆题.edit和show函数可以越界.edit函数和show函数相互配合泄露libc基地址,将main函数的返回地址覆盖成onegadgets拿shell. f ...

  9. 在对话框中设置前置任务（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 在[任务信息]中的[前置任务]选项卡中设置,这是最古板的法子. 至于[任务信息]这个对话框从哪里去找,这--这么久了,不会 ...

  10. 解决iwrite无法粘贴问题

    使用iwrite写作的时候,会遇到系统禁止粘贴的障碍 按F12键,再按F1键,在Disable JavaScrip前面的方框里打上勾就可以愉快的粘贴了