zoukankan      html  css  js  c++  java
  • js 弹出窗口 选值后提交回父级页(不刷新)的文本框

    在父级页 设置两个 文本框 id 和 name和 一个弹出窗口按钮

    在弹出窗口中列出若干条记录,现需要将任意一条记录点击提交。将该条记录的 id 和 name 字段 返回到父级对应的文本框中。不刷新父级页面。



    父窗口代码:(命名随意)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script language="javascript">
    var child;
    function onClick () {
    window.open('childwindow.html');
    }
    function setData (id, name) {
    document.getElementById('id').value = id;
    document.getElementById('name').value = name;
    }
    </script>
    </head>

    <body>
    <p>id:<input type="text" id="id"/></p>
    <p>name:<input type="text" id="name" /></p>
    <p><input type="button" value="弹出" onclick="onClick();" /></p>
    </body>
    </html>

    子窗口代码:(childwindow.html)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>

    <body>
    <table border="1">
    <tr onclick="opener.setData(this.childNodes[0].innerHTML, this.childNodes[1].innerHTML);window.close();"><th>id</th><th>name</th></tr>
    <tr onclick="opener.setData(this.childNodes[0].innerHTML, this.childNodes[1].innerHTML);window.close();"><td>1</td><td>Tony</td></tr>
    <tr onclick="opener.setData(this.childNodes[0].innerHTML, this.childNodes[1].innerHTML);window.close();"><td>2</td><td>Lily</td></tr>
    <tr onclick="opener.setData(this.childNodes[0].innerHTML, this.childNodes[1].innerHTML);window.close();"><td>3</td><td>John</td></tr>
    </table>
    </body>
    </html>

    // 多浏览器下测试通过
  • 相关阅读:
    Qt 智能指针学习(7种指针)
    Springmvc+Spring+Hibernate搭建方法
    DDD分层架构之领域实体(基础篇)
    LeetCode
    RabbitMQ
    Cocos2d-x环境搭建
    使用快捷键提升C#开发效率
    C# 6.0
    avalonjs 1.3.7发布
    VS2015安装
  • 原文地址:https://www.cnblogs.com/quanfu2326/p/4292499.html
Copyright © 2011-2022 走看看