查看本章节

查看作业目录

需求说明：

在页面上绘制一张表格，使用 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. 【leetcode】917. Reverse Only Letters（双指针）

    Given a string s, reverse the string according to the following rules: All the characters that are n ...

  2. db9串口接头的定义

    这个接头都是以公头为准,所有接头还是以公头去记. RS-232端(DB9公头/针型)引脚定义 2: RXD 3:TXD 5:GND 1/4/6:内部相链接 7/8   :内部相链接 1．RS-232端 ...

  3. Spring(2)：依赖注入DI

    依赖注入DI 当某个角色(可能是一个Java实例,调用者)需要另一个角色(另一个Java实例,被调用者)的协助时,在 传统的程序设计过程中,通常由调用者来创建被调用者的实例.但在Spring里,创建被 ...

  4. 解决Spring MVC @ResponseBody出现问号乱码问题

    原因是SpringMVC的@ResponseBody使用的默认处理字符串编码为ISO-8859-1,而我们前台或者客户端的编码一般是UTF-8或者GBK.现将解决方法分享如下! 第一种方法: 对于需要 ...

  5. pageBean的实体类

    package com.hopetesting.domain;import java.util.List;/** * @author newcityman * @date 2019/9/7 - 19: ...

  6. 【C/C++】链表

    #include <bits/stdc++.h> using namespace std; struct node { int data; // 数据 node* next; // 指针 ...

  7. Java 多线程的一次整理

    一天没有出过家门,实属无聊,没事瞎写写 1. 基本概念 1.1 多进程和多线程的概念 程序是由指令和数据组成,指令要运行,数据要加载,指令被 CPU 加载运行,数据被加载到内存,指令运行时可由 CPU ...

  8. Java中的变量，数据类型和运算符

    变量,数据类型和运算符 1.变量是一个数据存储空间的表示,它是储存数据的基本单元. 如何理解这句话,下面用一个表格可以形象的表达: 变量与房间之间的对应关系 房间名称 变量名 房间类型 变量类型 入住 ...

  9. Linux服务加入systemctl|service管理

    一.加入systemctl 1.添加 vim /usr/lib/systemd/system/user_timejob.service # copy to /usr/lib/systemd/syste ...

  10. 安装Redis5.0.8教程图解

    文档:安装Redis5.0.8教程图解.note 链接:http://note.youdao.com/noteshare?id=737620a0441724783c3f8ef14ab8a453& ...