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>

    // 多浏览器下测试通过
  • 相关阅读:
    fabric 网络操作中遇到的问题
    springBoot项目启动初始化数据
    行为验证码AJ-Captcha
    RestControllerAdvice注解无效问题
    记录美团一面问题
    关于springMVC
    作业08-集合
    选择排序
    Centos7 使用Minikube搭建Kubernetes集群
    Vscode 配置 Go语言插件
  • 原文地址:https://www.cnblogs.com/quanfu2326/p/4292499.html
Copyright © 2011-2022 走看看