`
schy_hqh
  • 浏览: 558294 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

添加用户：弹出DIV，动态添加删除行

 
阅读更多

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>jQuery弹出层效果</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<style>
.black_overlay {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 1001;
	-moz-opacity: 0.8;
	opacity: .80;
	filter: alpha(opacity = 80);
}

.white_content {
	display: none;
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	border: 16px solid lightblue;
	background-color: white;
	z-index: 1002;
	overflow: auto;
}

.white_content_small {
	display: none;
	position: absolute;
	top: 20%;
	left: 30%;
	width: 40%;
	height: 50%;
	border: 16px solid lightblue;
	background-color: white;
	z-index: 1002;
	overflow: auto;
}
</style>
<script type="text/javascript">
	//弹出隐藏层
	function ShowDiv(show_div, bg_div) {
		document.getElementById(show_div).style.display = 'block';
		document.getElementById(bg_div).style.display = 'block';
		var bgdiv = document.getElementById(bg_div);
		bgdiv.style.width = document.body.scrollWidth;
		// bgdiv.style.height = $(document).height();
		$("#" + bg_div).height($(document).height());
	};
	//关闭弹出层
	function CloseDiv(show_div, bg_div) {
		document.getElementById(show_div).style.display = 'none';
		document.getElementById(bg_div).style.display = 'none';
	};
</script>
<script type="text/javascript">

	$(function() {
		for ( var i = 1; i <= 10; i++) {
			insertRow(i);
		}
	});

	function insertRow(seq) {
		$("tbody").append(
				"<tr>" + "<td><input type='checkbox'/></td>"
						+ "<td><input type='text' value='"+seq+"'/></td>"
						+ "<td><input type='text' value='"+seq+"'/></td>"
						+ "</tr>");
	}

	function addRow() {
		var rowCount = $("tbody > tr").length;
		insertRow(++rowCount);
	}

	function delRow() {
		$("input:checked").each(function() {
			$(this).parent().parent().remove();
		});
	}
</script>
</head>
<body>
	<input id="Button1" type="button" value="添加代理人"
		onclick="ShowDiv('MyDiv','fade')" />
	<!--弹出层时背景层DIV-->
	<div id="fade" class="black_overlay"></div>
	<div id="MyDiv" class="white_content">
		<div style="text-align: right; cursor: default; height: 40px;">
			<span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
		</div>
		<div>
			<table  id="tab" border="1" width="90%">
				<thead style="cellpadding:0,cellspacing:0">
					<tr>
						<th></th>
						<th>用户名</th>
						<th>密码</th>
					</tr>
				</thead>
				
				<tbody>
				</tbody>
				<tfoot>
					<div>
						<input type="button" value="add" id="add" onclick="addRow()"/>
						<input type="button" value="del" id="del" onclick="delRow()"/>
					</div>
				</tfoot>
			</table>
		</div>
	</div>
</body>
</html>

 

分享到：
| Thymeleaf模板的使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Jquery弹出DIV

    "Jquery弹出DIV"是指利用jQuery来实现一个可交互的模态对话框（通常称为弹出窗口或浮层），在网页上显示额外的信息或者进行一些用户交互。模态对话框通常是网页中的一个浮动元素，可以覆盖页面的其他部分，直到用户...

    div+javascript的弹出框

    在网页设计中，"div+javascript的弹出框"是一个常见的交互元素，它结合了HTML的div元素和JavaScript技术来创建动态的、可自定义的弹出窗口。这个标题所指的知识点主要涵盖两个部分：一是div元素及其布局，二是...

    div做的弹出窗口

    在Web开发中，弹出窗口通常用于显示警告、确认信息或者进行用户交互。与传统的JavaScript alert、confirm和prompt不同，自定义的弹出窗口通过CSS控制样式，用JavaScript实现交互功能，提供了更高的定制性和用户体验...

    JQuery PopupDiv 弹出层插件 v1.0

    JQuery PopupDiv 插件就是这样一个专为jQuery框架设计的弹出层解决方案，它允许开发者轻松创建具有高度自定义性的弹出层，为用户提供更加丰富的用户体验。本文将详细解析JQuery PopupDiv 插件v1.0的特性、使用方法...

    javascript操作DIV总结（弹出窗口篇）

    在JavaScript中，对DIV的操作主要包括获取元素、修改属性、添加和删除事件监听器，以及动态创建和销毁元素。对于弹出窗口，模态对话框和非模态弹出框的实现主要依赖于CSS和JavaScript的结合使用，浮动窗口则涉及到...

    js鼠标浮动显示div

    在本案例中，"js鼠标浮动显示div"指的是当鼠标移动到特定的input元素上时，会显示出一个div层，该div层中包含有与input相关的附加信息或者功能。 首先，我们需要了解几个关键的概念： 1. **事件监听器**：...

    自己做的一个div弹出层js

    在网页设计中，"div弹出层js"是一种常见的交互元素，它允许用户与页面上的特定内容进行交互，如显示消息、表单或更多详细信息，而不会离开当前页面。这个自定义的实现主要涉及HTML的`div`元素、CSS样式以及...

    几种样式的DIV弹出层

    一个简单的弹出层通常包含一个隐藏的`&lt;div&gt;`元素，通过添加CSS样式如`display:none`来控制其默认不可见。当需要显示弹出层时，这个样式会被改变为`display:block`或者`display:flex`。 接着，CSS是用来美化弹出层的...

    div+css实现弹出窗口背景变暗效果

    在网页设计中，"div+css实现弹出窗口背景变暗效果"是一种常见的交互设计手法，主要用于提升用户体验，特别是当用户需要关注特定弹出信息时。这种效果通过创建一个覆盖整个页面的半透明div层来实现，使得弹出窗口成为...

    DIV弹出层+JS条件过滤

    在网页开发中，"DIV弹出层+JS条件过滤"是一种常见的交互设计技术，用于提升用户体验和增强数据筛选效率。这种技术结合了HTML的层（Layer）概念、CSS的样式控制以及JavaScript的动态功能，实现了在用户输入时即时对...

    一套漂亮的js div alert弹出窗体

    3. DOM操作：JavaScript可以用来动态修改DOM（文档对象模型），添加、删除或更新页面元素，这对于创建动态弹出窗体至关重要。 4. 弹出窗体类型：除了基本的警告提示（alert），可能还包括确认对话框（confirm）和...

    js弹出层多样式。

    在网页设计中，弹出层（也称为模态窗口或对话框）是一种常见的交互元素，用于在用户与页面主内容互动时提供额外信息或功能。本文将深入探讨使用JavaScript（JS）和CSS来创建多样化弹出层的方法，以及如何通过CSS实现...

    js弹出可拖动div

    此外，如果div是弹出式的，可能需要额外的代码来控制它的显示和隐藏，例如通过添加或删除CSS类来改变其可见性。 至于标签中的"源码"，这暗示我们可能会在上述示例的基础上看到更复杂的功能，比如封装成一个可复用的...

    导航弹出层

    在网页设计和开发中，"导航弹出层"是一种常见的交互元素，用于提供额外的信息或者功能，而不会中断用户在主页面上的浏览体验。这种设计通常结合JavaScript（JS）实现，因为JavaScript能赋予网页动态性和交互性。接...

    一个很好用的 js 弹出层

    在JS中，可以使用DOM操作来动态创建、修改和删除DOM元素，以此来实现弹出层的显示和隐藏。 1. **HTML结构**：通常，弹出层会包含一个容器元素，用来包裹所有的内容，如标题、内容区域、关闭按钮等。这个容器默认是...

    Web弹出框实例

    在Web开发中，弹出框是一种常见的用户交互元素，用于显示警告、确认信息或获取用户输入。本实例将深入探讨如何使用JavaScript实现Web弹出框，并提供相关代码示例。 一、JavaScript弹出框基本类型 1. `alert()`：...

    jquery弹出框 源码程序！

    jQuery，作为一个强大的JavaScript库，提供了丰富的API和插件，使得创建弹出框变得简单易行。本文将深入探讨jQuery弹出框的实现原理、常见功能以及实际应用。 一、jQuery弹出框基础 jQuery弹出框并非jQuery核心库...

    js 右下角弹出div 类似 QQ消息提示

    ### JavaScript 实现右下角弹出 DIV 类似 QQ 消息提示 #### 一、概述 在网页开发中，为了提升用户体验与交互性，我们常常需要实现类似即时通讯软件（如QQ）的消息提示功能。这类功能的核心在于能够在浏览器窗口的...

    弹出层效果（源代码）

    在IT行业中，弹出层效果是一种常见的用户界面设计元素，用于在用户与网站或应用程序交互时显示额外的信息或功能。这种效果通常用于显示警告、确认对话框、模态窗口、下拉菜单等。本资源提供的“弹出层效果（源代码）...

    jQuery弹出层弹出框效果

    在现代网页设计中，交互性和用户体验是至关重要的因素，而jQuery弹出层弹出框效果则是提升这些体验的重要工具。jQuery，一个强大的JavaScript库，简化了DOM操作、事件处理、动画以及Ajax交互，使得创建复杂的网页...

Magicbox
Global site tag (gtag.js) - Google Analytics