使用js动态添加组件

在文章开始之前,我想说两点

1 自己初学js,文章的内容在大神看来可能就是不值一提,但是谁都是从hello world来的,望高手不吝指教#

2 我知道这个标题起的比较蛋疼,大家看图就能说明问题:

初始页面如下图:

点击"有"后,如下图:

点击"点此添加条目"两次后,如下图:

OK,我们分析代码:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%System.out.println(request.getContextPath()); %>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>新建慢病档案</title>
		<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />

		<script type="text/javascript" src="../../../js/jquery1.7.js"></script>

		<script type="text/javascript" src="js/familyHistoryXs.js"></script>

		</head>

	<body>

	<s:form action="xx" method="post" theme="simple" >
	<div align="center" id="div_main">
		<table class="tab_head" width="100%">
			<tr>
				<td>
					<h2 align="center">使用js动态添加条目</h2>
				</td>

			</tr>
		</table>

		<br/>

						<div class="tab_content">
						<div  class="subTabs" >
						<br/>

						<div id="family"  class="subTabs">

							<table class="tab_frm" width="100%">
								<tr>
									<td class="left" width="30%">
										有无其他条目：
									</td>
									<td>

										无<input type="radio" name="family"  id="radio_drug_no" value="no" checked="true"/>
										   
										有<input type="radio" name="family"  value="yes"/>  
										<a id="a_family" style="display:none" href='#' onclick="addFamily();return false;">点此添加条目</a>
								  </td></tr></table>

							<table class="tab_frm" width="100%" style="display:none;"  id="familyHistory">
								<tr >
									<td class="left" width="10%" rowspan="2">
										与本人关系：<s:select  list="#{'-1':'-请选择-','父亲':'父亲','母亲':'母亲','哥哥':'哥哥','弟弟':'弟弟','姐姐':'姐姐','妹妹':'妹妹','儿子':'儿子','女儿':'女儿'}" theme="simple"/></td>
									<td class="left" width="15%" >所患疾病</td>
									<td width="15%"><input type="checkbox"  value="高血压"  onclick="familyTime(this)">高血压

										</td>
									<td width="15%"><input type="checkbox"  value="糖尿病"  onclick="familyTime(this)">糖尿病

										</td>
									<td width="15%"><input type="checkbox"  value="冠心病"  onclick="familyTime(this)">冠心病

										</td>

								</tr>
								<tr>
									<td class="left" width="15%">备注(如患其他疾病请填写)</td>
									<td width="75%" colspan="5"><s:textarea theme="simple"  cssStyle="width:97%;overflow-y:visible;" /></td>
								</tr>
							</table>
							<br/><br/>
						</div>

						</div>
						</div>

		<input type="button" name="back" value="上一步"
		onclick="javascript:window.location.href='findMedicalHistory.action'">
		<input type="submit" value="下一步"   id="submitInfo"/>

	</div>
	</s:form>
	</body>
</html>

html引入了familyHistoryXs.js,我们进去看看

/**
 *
 */
var familyCount;

$(document).ready(function(){
	familyCount=0;

	//给所有name为family的input上绑定事件 click
	//一旦触发了 就去运行radioEvent方法
	$("input[name='family']").bind("click",function(){
		radioEvent($(this));
	});
});

function radioEvent(e) {

	//a_family默认的diplay是none 也就是不显示
	//如果我点击了yes 就让它显示
	//#a_family 就是网页里那个  点此添加条目 的东西

	//如果点击 无 首先隐藏 点此添加条目
	//接着下面的条目也祛除掉

	if ("yes" == e.val()) {
		$("#a_family").attr("style", "display:''");
	} else {
		$("#a_family").attr("style", "display:none");
		for ( var i = 0; i < familyCount; i++) {
			$("#familyHistory" + i).remove();
		}
		familyCount = 0;
	}

}

function addFamily(){
    var tr=$("#familyHistory").clone();
    tr.attr("id","familyHistory"+familyCount);
    tr.attr("style","display:'';margin-top:10px");

	$("#family").append(tr);

	var select=tr.find("select").eq(0);
	select.attr("name","fimalyList["+familyCount+"].patientRelation");
	select.attr("id","fimalyList["+familyCount+"].patientRelation");

	var gxy=tr.find("input").eq(0);
	gxy.attr("name","fimalyList["+familyCount+"].gxy");
	gxy.attr("id","fimalyList["+familyCount+"].gxy");

	var tnb=tr.find("input").eq(1);
	tnb.attr("name","fimalyList["+familyCount+"].tnb");
	tnb.attr("id","fimalyList["+familyCount+"].tnb");

	var gxb=tr.find("input").eq(2);
	gxb.attr("name","fimalyList["+familyCount+"].gxb");
	gxb.attr("id","fimalyList["+familyCount+"].gxb");

	var note=tr.find("textarea").eq(0);
	note.attr("name","fimalyList["+familyCount+"].note");
	note.attr("id","fimalyList["+familyCount+"].note");

	familyCount++;

}

相应的css文件

body {
	margin-top: 8px;
	background-image: url(../images/bg.gif);
	background-repeat: repeat-x repeat-y;
	font-size: 13px;
}

.tab_data {
	border: 1px solid #0058a3;
	border-collapse: collapse;
	background-color: #eaf5ff;
	font-size: 13px;
}

.tab_data th {
	border: 1px solid #0058a3;
	background-color: #4bacff;
	color: #FFFFFF;
	font-weight: bold;
	padding: 2px 1px;
	text-align: center;
	height: 30px;
}

.tab_data td {
	border: 1px solid #0058a3;
	/*text-align: left;*/
	padding: 2px 4px;
	height: 28px;
}

tr.darkrow {
	background-color: #c7e5ff;
}

.tab_frm {
	border: 1px solid #0058a3;
	border-collapse: collapse;
	background-color: #eaf5ff;
	font-size: 13px;
}

.tab_frm td {
	padding: 2px 0px 2px 8px;
	border: 1px solid #0058a3;
	height: 30px;
}

td.left {
	background-color: #d1dff0;
	font-weight: bold;
	text-align: left;
}

td.right {
	text-align: left;
}

td.center {
	text-align: center;
}

.btn_normal {
	height: 24px;
	width: 60px;
	font-size: 13px;
	margin: 0px 6px;
}

.btn_long {
	height: 24px;
	width: 112px;
	font-size: 13px;
	margin: 0px 6px;
}

.btn_in_tab {
	height: 22px;
	width: 44px;
	font-size: 12px;
	margin: 0px 1px;
}

.spn_flag_1 {
	font-size: 12px;
	margin-left: 10px;
	color: red;
}

.tab_head {
	font-size: 12px;
	font-weight: bold;
	text-align: left;
}

.tab_head td {
	vertical-align: bottom;
}

a {
	text-decoration: none;
}

a:link {
	color: blue;
}

a:visited {
	color: blue;
}

a:hover {
	color: blue;
}

.flderr {
	color: red;
	font-size: 14px;
	font-weight: bold;
}

.ifr_page{
	width: 100%;
	height: 430px;
	margin: 0px;
	border-width: 0px;
	overflow: hidden;
}

.tab_stat_in {
	border: 0px;
	background-color: #eaf5ff;
	font-size: 13px;
	width: 100%;
}

.tab_stat_in td {
	text-align: center;
	border: 0px;
}

.p_nopriv{
	line-height:10%;
	color:red;
}

.p_nodata{
	line-height:10%;
	color:brown;
}

.p_hasdata{
	line-height:10%;
}

参考资料

http://blog.csdn.net/cike121272604/article/details/5809114

使用js动态添加组件的更多相关文章

js动态添加onload、onresize、onscroll事件(另类方法)
js动态添加onload.onresize.onscroll事件(另类方法) window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachE ...
form表单无法提交js动态添加的表单元素问题。。
第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url ...
【原生js】js动态添加dom，如何绑定事件
首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...
原生JS动态添加和删除类
原生JS动态添加和删除类由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类添加和和删除类有三种方法首先等 ...
MUI 里js动态添加数字输入框后，增加、减少按钮无效
numbox 的自动初化是在 mui.ready 时完成的mui 页面默认会自动初始化页面中的所有数字输入框,动态构造的 DOM 需要进行手动初始化.比如:您动态创建了一个 ID 为 abc 的数字输 ...
Angular使用总结 --- 通过指令动态添加组件
之前自己写的公共组件,都是会先引入,需要调起的时候再通过service控制公共组件状态.值.回调函数什么的.但是有一些场景不适合这种方式,还是动态添加组件更加好.通过写过的一个小组件来总结下. 创建组 ...
原生js动态添加style，添加样式
原生js动态添加style,添加样式第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...
Js动态添加复选框Checkbox
Js动态添加复选框Checkbox的实例方法!!! 首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement(" ...
js 动态添加表单 table tr
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

数据结构之并查集Union-Find Sets
1. 概述并查集(Disjoint set或者Union-find set)是一种树型的数据结构,常用于处理一些不相交集合(Disjoint Sets)的合并及查询问题. 2. 基本操作并查集 ...
LinkedList源码和并发问题分析
1.LinkedList源码分析 LinkedList的是基于链表实现的java集合类,通过index插入到指定位置的时候使用LinkedList效率要比ArrayList高,以下源码分析是基于JDK ...
Go 语言运算符
运算符用于在程序运行时执行数学或逻辑运算. Go 语言内置的运算符有: 算术运算符关系运算符逻辑运算符位运算符赋值运算符其他运算符接下来让我们来详细看看各个运算符的介绍. 算术运算符下表 ...
安全框架Shiro
原文地址:https://www.cnblogs.com/learnhow/p/5694876.html 一.架构要学习如何使用Shiro必须先从它的架构谈起,作为一款安全框架Shiro的设计相当精 ...
Spring常用配置(二)
OK,上篇博客我们介绍了Spring中一些常见的配置,上篇博客中介绍到的都是非常常见的注解,但是在Spring框架中,常见的注解除了上篇博客提到的之外,还有许多其他的注解,只不过这些注解相对于上文提到 ...
用Python最原始的函数模拟eval函数的浮点数运算功能
前几天看一个网友提问,如何计算'1+1'这种字符串的值,不能用eval函数. 我仿佛记得以前新手时,对这个问题完全不知道如何下手. 我觉得处理括号实在是太复杂了,多层嵌套括号怎么解析呢?一些多余的括号 ...
PHP和MySQL Web开发学习笔记介绍
前言从2016年2月1日开始,之后的几个月左右的时间里,我会写一个系列的PHP和MySQL Web开发的学习笔记.我之前一直从事Java语言的开发工作,最近这段时间非常想学习一门语言,就选择了PHP ...
spark运算结果写入hbase及优化
在Spark中利用map-reduce或者spark sql分析了数据之后,我们需要将结果写入外部文件系统. 本文,以向Hbase中写数据,为例,说一下,Spark怎么向Hbase中写数据. 首先,需 ...
hive 压缩全解读(hive表存储格式以及外部表直接加载压缩格式数据)；HADOOP存储数据压缩方案对比（LZO,gz，ORC）
数据做压缩和解压缩会增加CPU的开销,但可以最大程度的减少文件所需的磁盘空间和网络I/O的开销,所以最好对那些I/O密集型的作业使用数据压缩,cpu密集型,使用压缩反而会降低性能. 而hive中间结果 ...
Android应用打破65K方法数限制
近日,Android Developers在Google+上宣布了新的Multidex支持库,为方法总数超过65K的Android应用提供了官方支持.如果你是一名幸运的Android应用开发者,正在开 ...

使用js动态添加组件

使用js动态添加组件的更多相关文章

随机推荐

热门专题