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


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 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
vue的mixins属性详解
Mar 14 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
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
php微信公众平台开发类实例
2015/04/01 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
jquery操作select大全
2014/04/25 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
js实现时间日期校验
2020/05/26 Javascript
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
Python实现爬取并分析电商评论
2020/06/19 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
天游软件面试
2013/11/23 面试题
优良学风班总结材料
2014/02/08 职场文书
工作推荐信范文
2014/05/10 职场文书
文明班集体申报材料
2014/05/23 职场文书
法人任命书范本
2014/06/04 职场文书
扬州个园导游词
2015/02/06 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
读书笔记格式
2015/07/02 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS
实战Python爬虫爬取酷我音乐
2022/04/11 Python
vue封装数字翻牌器
2022/04/20 Vue.js