使用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 ...
随机推荐
- Python小代码_5_二维矩阵转置
使用列表推导式实现二维矩阵转置 matrix = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]] print(matrix) matrix_t = [[ro ...
- 判断当前设备是移动端或者PC端
<script> function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); var ...
- JSON 封装函数
var eventUtil = { addHandler:function(element,type,handler) { //添加句柄 if(element.addEventListener) { ...
- ACM Curling 2.0
在行星MM-21上,今年奥运会之后,冰壶(curling)越来越受欢迎. 但规则与我们有所不同. 该游戏是在冰盘上进行的,在冰棋盘上标有方形网格.他们只用一块石头. 游戏的目的是以最少的动作( th ...
- Webpack 4 Tutorial: from 0 Conf to Production Mode
webpack 4 is out! The popular module bundler gets a massive update. webpack 4, what's new? A massive ...
- 2.docker常用命令
一.安装相关 #查看docker是否安装 rpm -q docker #CentOS下安装docker sudo yum install docker #启动 Docker systemctl s ...
- comtypes加word 2013批量将pdf转换为doc
office 2013很强大. import os import sys import re import comtypes.client wdFormatPDF = 17 def covx_to_p ...
- 判断&数学&生活
作者:黄永刚 初次接触<概率论与数理统计>这门课的时候,脑袋中只有三个词:黑球.白球.袋子,所有的课程内容就是先取,后取,接触一月之后成功的被放趴下了,因此对于这门课程是没有什么好感的,考 ...
- Android简易实战教程--第四十六话《RecyclerView竖向和横向滚动》
Android5.X后,引入了RecyclerView,这个控件使用起来非常的方便,不但可以完成listView的效果,而且还可以实现ListView无法实现的效果.当然,在新能方便也做了大大的提高. ...
- Android简易实战教程--第四十一话《vitamio网络收音机》
在Android初级教程专栏里面,介绍了Android原生的VideoView和vitamio框架Android视频媒体相关,VideoView和开源框架vitamio.并演示了播放网络视频的对应的D ...