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


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获取页面元素的具体位置
Dec 09 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
Node.js的特点详解
Feb 03 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
php图片验证码代码
2008/03/27 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
python函数形参用法实例分析
2015/08/04 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
python编程线性回归代码示例
2017/12/07 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
盛大笔试题
2016/11/05 面试题
工作表扬信的范文
2014/01/10 职场文书
职业女性的职业规划
2014/03/04 职场文书
演讲稿开场白台词
2014/08/25 职场文书
责任书范本
2014/08/25 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python