使用js动态添加组件

最新推荐文章于 2024-02-07 11:08:41 发布

程序员小董

最新推荐文章于 2024-02-07 11:08:41 发布

阅读量2.9k

点赞数 1

分类专栏：前端文章标签： js bind find eq clone

本文链接：https://blog.csdn.net/dlf123321/article/details/49783427

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在文章开始之前,我想说两点
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='#' οnclick="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="高血压"  οnclick="familyTime(this)">高血压
													
										</td>
									<td width="15%"><input type="checkbox"  value="糖尿病"  οnclick="familyTime(this)">糖尿病
													
										</td>
									<td width="15%"><input type="checkbox"  value="冠心病"  οnclick="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="上一步" 
		οnclick="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

程序员小董

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用js动态添加组件

在文章开始之前,我想说两点1 自己初学js,文章的内容在大神看来可能就是不值一提,但是谁都是从hello world来的,望高手不吝指教#2 我知道这个标题起的比较蛋疼,大家看图就能说明问题:初始页面如下图:点击"有"后,如下图:点击"点此添加条目"两次后,如下图:OK,我们分析代码: 新建慢病档案
复制链接

扫一扫

专栏目录