天-海-蓝-蓝 2023-02-18 07:58 采纳率: 55.6%
浏览 61
已结题

关于window.open打开子页面的问题


<table align="center" cellpadding="4" cellspacing="1" class="toptable grid" border="1">
      <form name="form1" method="post">
        <tr>      
        <td height="30" align="right">购买客户：</td>
        <td class="category"><input name="huiyuan" readonly onClick="JavaScript:window.open('1.HTML?form=form1&field=huiyuan&field2=id_huiyuan&field3=zu','','directorys=no,toolbar=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=1700,height=800,top=176,left=180');" style="width:150px" value="单击选择客户">
          <input type="hidden" name="id_huiyuan" id="id" />
          <input type="text" name="zu" style="width:120px" readonly>
         </td>                
      </tr>
       <tr>
        <td align="right" height="30">收货地址：</td>
        <td class="category"><input name="address" type="text" id="address" size="100" maxlength="200"> <font color="#ff0000">*</font>
        <div id="address2"></div>
        </td>
        </tr>
    
      </form>
</table>


<meta   http-equiv="Content-Type"   content="text/html; charset=utf-8"/>

<table align="center" cellpadding="4" cellspacing="1" class="toptable grid" border="1">
  <tr 
  onMouseOver="this.className='highlight'" 
  onMouseOut="this.className=''" 
  onDblClick="
  window.opener.document.form1.huiyuan.value='二公司';
  window.opener.document.form1.id_huiyuan.value='340757';
  window.opener.document.form1.zu.value='负责业务员:李';
   window.opener.document.all.address2.innerHTML='二公司地址1
二公司地址2
二公司地址3'
  window.close();">
  <td height="25" align="center">第二个公司</td>
  <td align="center">含税</td>
    <td align="center">余总</td>
  </tr>
  
  <tr 
  onMouseOver="this.className='highlight'" 
  onMouseOut="this.className=''" 
  onDblClick="
  window.opener.document.form1.huiyuan.value='三公司';
  window.opener.document.form1.id_huiyuan.value='340754';
  window.opener.document.form1.zu.value='负责业务员:王';
  window.opener.document.all.address2.innerHTML='三公司地址1
三公司地址2
三公司地址3'
  window.close();">
    <td height="25" align="center">第三个公司</td>
    <td align="center">未税</td>
    <td align="center">梁总</td>
  </tr>

</table>

一个是主页面，一个是子页面，我需要在点击选择客户后，出现三个地址，当点击某一个地址时，该地址自动填入“address”文字框

img

  • 写回答

10条回答 默认 最新

  • Hello World, 2023-02-18 09:22
    关注
    主页面代码：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form name="form1" method="post">
        <table align="center" cellpadding="4" cellspacing="1" class="toptable grid" border="1">
            <tr>
                <td height="30" align="right">购买客户：</td>
                <td class="category">
                    <input name="huiyuan" id="huiyuan" readonly onClick="OpenCustomerDialog();" style="width:150px" value="单击选择客户">
                    <input type="hidden" name="id_huiyuan" id="id" />
                    <input type="text" name="zu" id="zu" style="width:120px" readonly>
                </td>
            </tr>
            <tr>
                <td align="right" height="30">收货地址：</td>
                <td class="category">
                    <input name="address" type="text" id="address" size="100" maxlength="200"> <font color="#ff0000">*</font>
                    <div id="address2"></div>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
<script>
    function OpenCustomerDialog() {
        var dialog = window.open('1.HTML?form=form1&field=huiyuan&field2=id_huiyuan&field3=zu', '', 'directorys=no,toolbar=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=1700,height=800,top=176,left=180');
        console.log(dialog);
    }
    function SetCustomer(customer) {
        console.log(customer);
        document.getElementById('huiyuan').value = customer.name;
        document.getElementById('id').value = customer.id;
        document.getElementById('zu').value = customer.zu;
        var addObj = document.getElementById('address2');
        var address = customer.address.split('\n');
        var addressHTML = '';
        for (var i = 0, n = address.length; i < n; i++) {
            addressHTML += '<div onclick="document.getElementById(\'address\').value=\'' + address[i] + '\'";>' + address[i] + '</div>';
        }
        document.getElementById('address2').innerHTML = addressHTML;
    }
</script>

    子页面代码：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <table align="center" cellpadding="4" cellspacing="1" class="toptable grid" border="1">
        <tr onMouseOver="this.className='highlight'"
            onMouseOut="this.className=''"
            onDblClick="SetCustomer({name:'二公司',id:'340757',zu:'负责业务员:李',address:'二公司地址1\n二公司地址2\n二公司地址3'});">
            <td height="25" align="center">第二个公司</td>
            <td align="center">含税</td>
            <td align="center">余总</td>
        </tr>

        <tr onMouseOver="this.className='highlight'"
            onMouseOut="this.className=''"
            onDblClick="SetCustomer({name:'三公司',id:'340754',zu:'负责业务员:王',address:'三公司地址1\n三公司地址2\n三公司地址3'});">
            <td height="25" align="center">第三个公司</td>
            <td align="center">未税</td>
            <td align="center">梁总</td>
        </tr>

    </table>
</body>
</html>
<script>
    function SetCustomer(customer) {
        window.opener.SetCustomer(customer);
        window.close();
    }
</script>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • lidiyscrp 2023-02-18 08:23
    关注

    可以在主页面form表单中添加一个button按钮，当点击该按钮时，弹出子页面，在子页面中，可以针对不同的公司，编写不同的onDblClick事件，在该事件中设置把子页面中的地址自动填入主页面的address文本框的值。

    评论
  • IT技术分享社区 数据库领域优质创作者 2023-02-18 08:39
    关注

    建议增加一个js文件存储收货地址的变量，然后点击地址的时候给字段赋值，然后上面的输入框也默认获取那个变量的值。
    最好的方式使用vue框架 可以非常轻松解决这个问题

    评论
  • b2b160 2023-02-18 08:54
    关注

    建议用一下jquery之类的框架，那样可以直接$（'address'）.value=$(三公司地址选择项).value;地址列表要用输入列表表示，不能用一个文本表示所有地址，至少要用标签表示不同地址项目

    评论
  • Ai GPT 2023-02-18 09:51
    关注

    你可以使用HTML和JavaScript来实现上述功能，具体实现方法如下：

    在HTML中创建一个下拉列表（select）组件，并在其中添加三个地址选项（option）。在每个选项中添加一个值属性（value），用于表示该地址的值。并为select组件添加一个事件处理函数（onchange），当选项发生改变时，该函数会被调用。

    <!-- 创建下拉列表组件 -->
<select id="address_list" onchange="selectAddress()">
  <option value="address1">Address 1</option>
  <option value="address2">Address 2</option>
  <option value="address3">Address 3</option>
</select>

<!-- 创建地址文本框 -->
<input id="address_textbox" type="text" name="address">

    在JavaScript中编写一个名为selectAddress()的函数，用于响应下拉列表选项的改变事件。该函数可以通过document.getElementById()方法获取下拉列表和地址文本框的引用，并获取所选地址选项的值。然后，将该值设置为地址文本框的值。

    function selectAddress() {
  var addressList = document.getElementById("address_list");
  var addressTextbox = document.getElementById("address_textbox");
  var selectedValue = addressList.value;
  addressTextbox.value = selectedValue;
}

    上述代码中，selectAddress()函数首先通过document.getElementById()方法获取地址列表和地址文本框的引用。然后，通过addressList.value获取所选地址选项的值，并将该值设置为地址文本框的值，实现地址的自动填充。

    将HTML和JavaScript代码保存到同一个文件中，并在浏览器中打开该文件。当选择不同的地址选项时，地址文本框的值会自动更新为所选地址的值

    评论
  • 喊你敲代码 2023-02-18 09:54
    关注
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<table align="center" cellpadding="4" cellspacing="1" class="toptable grid" border="1">
  <tr 
  onMouseOver="this.className='highlight'" 
  onMouseOut="this.className=''" 
  onDblClick="
  window.opener.document.form1.huiyuan.value='二公司';
  window.opener.document.form1.id_huiyuan.value='340757';
  window.opener.document.form1.zu.value='负责业务员:李';
  // 将收货地址信息填入文本框和div中
  window.opener.document.form1.address.value='二公司地址1\n二公司地址2\n二公司地址3';
  window.opener.document.all.address2.innerHTML=window.opener.document.form1.address.value;
  window.close();">
  <td height="25" align="center">第二个公司</td>
  <td align="center">含税</td>
    <td align="center">余总</td>
  </tr>
  
  <tr 
  onMouseOver="this.className='highlight'" 
  onMouseOut="this.className=''" 
  onDblClick="
  window.opener.document.form1.huiyuan.value='三公司';
  window.opener.document.form1.id_huiyuan.value='340754';
  window.opener.document.form1.zu.value='负责业务员:王';
  // 将收货地址信息填入文本框和div中
  window.opener.document.form1.address.value='三公司地址1\n三公司地址2\n三公司地址3';
  window.opener.document.all.address2.innerHTML=window.opener.document.form1.address.value;
  window.close();">
    <td height="25" align="center">第三个公司</td>
    <td align="center">未税</td>
    <td align="center">梁总</td>
  </tr>
 
</table>
    评论
  • zzwwtyyds 2023-02-18 10:15
    关注

    引用gpt
    根据您提供的代码和描述，可以看出这是一个页面中包含了两个表格，其中一个表格中有一个“购买客户”输入框和一个可弹出的子页面表格，子页面表格中包含了多个选项，其中每个选项包含了一个公司名称、一些属性信息以及一个地址。

    当在“购买客户”输入框中单击选择客户时，会弹出子页面表格，用户可以在子页面表格中选择一个选项（即一个公司），选择该公司时，会自动填充“购买客户”输入框、一个隐藏的输入框和一个只读输入框。此外，当用户在子页面表格中选择该公司时，该公司的地址也会显示在一个名为“address2”的 DIV 元素中。

    因此，当用户在子页面表格中选择一个公司时，需要执行以下操作：

    将所选公司的名称填入“购买客户”输入框中；
    将所选公司的 ID 填入一个隐藏的输入框中；
    将所选公司的属性信息填入一个只读输入框中；
    将所选公司的地址信息填入“address”输入框中。
    具体实现方法可以在子页面表格中为每个选项添加一个双击事件，该事件会执行一个 JavaScript 函数，该函数会获取所选公司的名称、ID、属性信息和地址信息，并将它们填入相应的输入框和 DIV 元素中。例如：

    function selectCompany(name, id, property, address) {
  window.opener.document.form1.huiyuan.value = name;
  window.opener.document.form1.id_huiyuan.value = id;
  window.opener.document.form1.zu.value = property;
  window.opener.document.form1.address.value = address;
  window.close();
}

    在子页面表格中，每个选项的双击事件可以通过以下方式来实现

    <tr ondblclick="selectCompany('第二个公司', '340757', '负责业务员:李', '二公司地址1\n二公司地址2\n二公司地址3')">
  <td height="25" align="center">第二个公司</td>
  <td align="center">含税</td>
  <td align="center">余总</td>
</tr>

    其中，selectCompany 函数的参数可以通过在子页面表格中的选项中添加属性来实现，例如：

    <tr data-name="第二个公司" data-id="340757" data-property="负责业务员:李" data-address="二公司地址1\n二公司地址2\n二公司地址3" ondblclick="selectCompany(this)">
  <td height="25" align="center">第二个公司</td>
  <td align="center">含税</td>
  <td align="center">余总</td>
</tr>

    在 selectCompany 函数中，可以通过以下方式获取所选公司的信息：

    function selectCompany(row) {
  var name = row.getAttribute('data-name');
  var id = row.getAttribute('data-id');
    评论
  • CSDN-Ada助手 CSDN-AI 官方账号 2023-02-18 10:17
    关注
    评论
  • qq_46161207 2023-02-18 10:18
    关注

    根据提供的代码，可以看出这是一个简单的表单，包括购买客户和收货地址。当单击“单击选择客户”时，会弹出一个新窗口，显示三个公司的地址列表。当在子窗口中双击某个公司时，会自动填充相关信息并关闭子窗口。

    为了实现所需功能，您需要将以下代码添加到主页面中的标签中：

    <script type="text/javascript">
function setAddress(address) {
  document.form1.address.value = address;
}
</script>

    接下来，您需要将子页面中的以下代码修改：

    
onDblClick="
  window.opener.document.form1.huiyuan.value='二公司';
  window.opener.document.form1.id_huiyuan.value='340757';
  window.opener.document.form1.zu.value='负责业务员:李';
  window.opener.document.all.address2.innerHTML='二公司地址1
二公司地址2
二公司地址3'
  window.close();"

    变为如下形式：

    onDblClick="
  window.opener.setAddress('二公司地址1\n二公司地址2\n二公司地址3');
  window.close();"

    这将在双击公司时调用一个新的JavaScript函数“setAddress”，它将所选地址作为参数并将其填充到主页面的“address”文本框中。

    最后，您需要将主页面中的以下代码修改：

    
<input name="huiyuan" readonly onClick="JavaScript:window.open('1.HTML?form=form1&field=huiyuan&field2=id_huiyuan&field3=zu','','directorys=no,toolbar=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=1700,height=800,top=176,left=180');" style="width:150px" value="单击选择客户">

    变为如下形式：

    
<input name="huiyuan" readonly onClick="JavaScript:window.open('1.HTML?form=form1&field=huiyuan&field2=id_huiyuan&field3=zu','','directorys=no,toolbar=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=1700,height=800,top=176,left=180');" style="width:150px" value="单击选择客户">
<div id="address2"></div>

    这将在主页面下方添加一个名为“address2”的DIV元素，以便在子页面中选择地址后在主页面上显示。

    通过这些更改，您应该能够实现所需的功能。

    评论
  • 菜鸟才能学的更多 2023-02-19 02:08
    关注

    你可以在子页面中的onDblClick事件中，使用JavaScript修改父页面中文本框的值。具体可以在window.opener对象上访问父窗口中的表单元素，然后设置其value属性即可。以下是修改address文本框的示例：

    window.opener.document.form1.address.value = '三公司地址1\n三公司地址2\n三公司地址3';
    评论
查看更多回答(9条)

报告相同问题？

问题事件

  • 系统已结题 2月27日
  • 已采纳回答 2月19日
  • 创建了问题 2月18日

悬赏问题

  • ¥30 频率与占空比均可调的方波发生器
  • ¥15 VB6.0中PICTUREBOX加载本地图片无法显示
  • ¥100 关于游戏app session获取的问题
  • ¥15 MYSQL数据库建表
  • ¥15 爬虫程序爬取TTGChina网站文章代码
  • ¥35 由于系统缓冲区空间不足或队列已满，不能执行套接字上的操作。
  • ¥15 如何用下图方法在AMESim中搭建离心泵模型
  • ¥15 C#连接服务器，请求时报Ssl/Tsl未能建立安全通道
  • ¥15 xcode15build的c++ dylib在10.15上不兼容
  • ¥15 CPLD如何实现在线逻辑分析