网页从弹窗页面单选框传值至父页面代码分享


Posted in Javascript onSeptember 29, 2015

在项目中,需要完成这样一个功能:在加入新机构的时候,需要选择它的上级机构,实现方式为点击查找填入按钮,弹出弹窗页面,用户点击所需的行,并点击确定按钮,将用户选择的机构名称和机构代码传回到加入新机构的页面。

在这里记录一下弹窗页面代码

网页从弹窗页面单选框传值至父页面代码分享

<!DOCTYPE html PUBLIC "-//WC//DTD HTML . Transitional//EN" "http://www.w.org/TR/html/loose.dtd">
 <%@ page contentType="text/html;charset=utf-" pageEncoding="utf-" language="java" %>
 <%@ taglib uri="/struts-tags" prefix="s"%>
 <%@ taglib uri="/page-tags" prefix="p"%>
 <html>
   <head>
     <title>机构点选查询</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-">
     <link rel="stylesheet" type="text/css" href="../css/style.css" />
     <link rel="stylesheet" type="text/css" href="../css/newStyle.css" />
     <script type="text/javascript" src="../js/jquery.js"></script>
     <script type="text/javascript" src="../js/common.js"></script>
     <script type="text/javascript" charset="utf-">
 //点击整行都可选中单选框
     function clickTr(obj) {
     $("#mainTable tbody tr td input[type='radio']").attr("checked",
         "undefined");
     $("td input[type='radio']", obj).attr("checked", "checked");
     //alert($("td input[name='insideEquip.equipinstance']",obj).val());
   }
 //将通过td的class获取到的值传到父页面对应的元素上
   function setValue() {
     var input = $("#mainTable tbody tr td input[type='radio']:checked");
     if (!input.val()) {
 
       window.close();
       return;
     }
     var tr = input.parent().parent();
     
     window.opener.document.getElementById("textagencyid").value = $(
         "td.agancy input", tr).val();
     window.opener.document.getElementById("textagencyname").value = $(
         "td.agencyname", tr).text();
     
     window.close();
   }  
   </script>
   </head>
   <body>
 <div class="searchArea" style="height:px;">
 <form action="" method="post">
     <input class="button" type="button" value="确定" onclick="javascript:setValue();"/>
     </form>
   </div>
    <div class="tableArea">
   <table class="mainTable" id="mainTable">
     <thead>
     <tr>
               <th>选择</th>
               <th>机构编号</th>
               <th>机构名称</th>
               <!--<th>工作岗位码</th>-->
               <th>上级机构</th>
               <th>组织机构代码</th>
               <th>机构类别</th>        
     </tr>
     </thead>
     <tbody>  
    <s:iterator value="busiAgencys" var="p" >
     <tr onclick="clickTr(this);">
     <td class="agancy"><input type="radio" name="log" value="<s:property value="agencyid"/>" ></td>
     <td><s:property value="agencyid"/></td>
     <td class="agencyname"><s:property value="agencyname"/></td>
     <!--<td><s:property value="handle"/></td>-->
     <td><s:property value="sjjg"/></td>
     <td><s:property value="orgcode"/></td>
     <td><s:property value="jglb"/></td>
    </tr>
    </s:iterator>    
     </tbody>
   </table>
   <div class="pagin">
     <p:page href="findBusiAgency" css="pages" totalPage="${totalPage}" page="${page}"></p:page>
   </div>  
   </div>
   <script type="text/javascript">
   $('.tablelist tbody tr:odd').addClass('odd');
   </script>
   </body>
 </html>

以上代码很简单吧,需要的朋友可以直接拷贝使用,以上内容希望对大家有所帮助。

Javascript 相关文章推荐
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 Javascript
pace.js页面加载进度条插件
Sep 29 #Javascript
js强制把网址设为默认首页
Sep 29 #Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 #Javascript
JQuery实现左右滚动菜单特效
Sep 28 #Javascript
JS动态日期时间的获取方法
Sep 28 #Javascript
js电话号码验证方法
Sep 28 #Javascript
JavaScript多图片上传案例
Sep 28 #Javascript
You might like
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
php获取网页内容方法总结
2008/12/04 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
python实现决策树
2017/12/21 Python
python实现excel读写数据
2021/03/02 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
python中如何设置代码自动提示
2020/07/15 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
比利时买床:Beter Bed
2017/12/06 全球购物
params有什么用
2016/03/01 面试题
人力资源部培训专员岗位职责
2014/01/02 职场文书
婚前协议书
2014/04/15 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
庆祝儿童节标语
2014/10/09 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
小学毕业教师寄语
2019/06/21 职场文书
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript