使用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 ...
随机推荐
- asp.net用户控件引用
<%@ Register Src="~/_module/IndexChannelHead.ascx" TagName="tn" TagPrefix=&qu ...
- drools 手动创建kmoudle.xml文件
@Test public void test() { KieServices kieServices = KieServices.Factory.get(); KieResources resourc ...
- 阿里云部署mongdb（CentOS）
配置包管理系统 (yum). Xshell登录Linux查看操作系统版本信息 lsb release -a 可以在官网选择对应的版本 :官网的安装指导文档http://docs.mongodb.org ...
- angular2+ionic2架构介绍
不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别. 1. 项目所用:angular2+ionic2+typescript 2. 项目结构 3. S ...
- Printer for Me
今天,良心系部终于给我配了打印机^^. 办公室门外还挂了牌子.
- SpringMVC 教程 - Handler Method
原文链接:https://www.codemore.top/cates/Backend/post/2018-04-21/spring-mvc-handler-methods 由注解@RequestMa ...
- JQuery写的一个常见的banner
大致的布局如下: <div class="banner" > <div class="pic"> ...
- Docker使用 Supervisor 来管理进程
Docker 容器在启动的时候开启单个进程,比如,一个 ssh 或者 apache 的 daemon 服务.但我们经常需要在一个机器上开启多个服务,这可以有很多方法,最简单的就是把多个启动命令放到一个 ...
- 实验-使用VisualVM或JConsole进行对程序进行性能分析
参考资料: 性能分析神器VisualVM java可视化监控工具 完成下列任务: 1.分析内存堆 使用+进行频繁的字符串拼接 2.CPU性能分析 3.线程分析 编程比较以下几个方法所创建的线程 Exe ...
- Retrofit，Okhttp对每个Request统一动态添加header和参数（五）
文/Tamic 地址:http://blog.csdn.net/sk719887916/article/details/52189602 Header How to Add header to Eve ...