查看本章节

查看作业目录

需求说明：

在页面上绘制一张表格，使用 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. k8s配置中心-configmap,Secret密码

    目录 k8s配置中心-configmap,Secret 创建ConfigMap 使用ConfigMap subPath参数 Secret 官方文档 编写secret清单 使用secret 在 Pod ...

  2. STM32 CAN用队列缓冲接收的例子

    [1]CAN接收用队列缓冲的例子: 发单帧没有问题,多帧或者连续发两帧就有问题.

  3. 关于mysql自动备份的小方法

    目前流行几种备份方式:逻辑备份.物理备份.双机热备份.备份脚本的编写等,本文分别从这些方面总结了MySQL自动备份策略的经验和技巧,一起来看看. 目前流行几种备份方式: 一.逻辑备份:使用mysql自 ...

  4. 【Linux】【Commands】trouble shooting命令详解目录

    1. 简介 1.1. 最近看到阿里的运维招聘需要熟练掌握以下的命令,我就针对这几个命令做一下总结,有些命令我觉得别人总结的挺好了,我就不赘述了 1.2. 还有一些其他我觉得用得到的命令的用法会在第三部 ...

  5. get请求url参数中有+、空格、=、%、&、#等特殊符号的问题解决

    url出现了有+,空格,/,?,%,#,&,=等特殊符号的时候,可能在服务器端无法获得正确的参数值,如何是好?解决办法将这些字符转化成服务器可以识别的字符,对应关系如下:URL字符转义 用其它 ...

  6. BigDecimal 中 关于RoundingMode介绍

    RoundingMode介绍 RoundingMode是一个枚举类,有以下几个常量:UP.DOWN.CEILING.FLOOR.HALF_UP.HALF_DOWN.HALF_EVEN.UNNECESS ...

  7. JSP中声明变量、方法

    在JSP页面中声明局部变量,全局变量,方法等 代码示例: <%@ page language="java" contentType="text/html; char ...

  8. python安装imblearn（PackageNotFoundError： ''Package missing in current channels"）

    1.imblearn包在anaconda中是没有的,需要在命令行下自行安装,以下两个命令任选一个: 1. conda install -c glemaitre imbalanced-learn2. p ...

  9. .net 5 开发部署B/S程序。

    现在.net 6 已经出来了,visualStudio 2022也发行预览版了. 自 .net5 发布,.net core 与.net framework 已经走向统一.确实越来越好用了. 现在.ne ...

  10. Git忽略提交规则 .gitignore文件

    在使用Git的过程中,我们喜欢有的文件比如日志,临时文件,编译的中间文件等不要提交到代码仓库,这时就要设置相应的忽略规则,来忽略这些文件的提交.简单来说一个场景:在你使用git add .的时候,遇到 ...