DOM应用案例--选择输入对话框

发布时间:2017-2-20 9:48:35 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"DOM应用案例--选择输入对话框",主要涉及到DOM应用案例--选择输入对话框方面的内容,对于DOM应用案例--选择输入对话框感兴趣的同学可以参考一下。

实现效果:单击"选择输入"按钮,弹出对话框以供选择输入。如图: 父窗口(即有选择输入框)的代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> 用户名: <input id="usernameID" type="text" readonly/> <input id="buttonID" type="button" value="选择输入" /> <script type="text/javascript"> //单击"选择输入"按钮,弹出对话框以供选择输入 document.getElementById("buttonID").onclick = function(){ //需要在打开的窗口中,加载的页面路径 var sURL = "showModalDialog2.html"; //需要向打开的窗口,传递的参数,没有的话就NULL var vArguments = window; //需要设置打开的窗口特征 var sFeatures = "dialogHeight:400px,dialogWidth:400px"; //以模式和非模式方式打开窗口 window.showModalDialog(sURL,vArguments,sFeatures); }; </script> </body> </html> 子窗口(即弹出窗口)代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <script type="text/javascript"> //单击"选择输入"按钮后,会将对应的值显示在父窗口文本框中 function selectInput(inputElement){ //接收父窗口传递过来的值 var fatherWindow = window.dialogArguments; //获取选中的用户名 var username = inputElement.parentNode.nextSibling.innerHTML; //将用户名动态填入到父窗口的文本框中 fatherWindow.document.getElementById("usernameID").value=username; } </script> <table border="1" align="center"> <tr> <th> 操作 </th> <th> 用户名 </th> </tr> <tr><td><input type="button" value="选择输入" onclick="selectInput(this)" /></td><td>张三</td></tr> <tr><td><input type="button" value="选择输入" onclick="selectInput(this)" /></td><td>李四</td></tr> <tr><td><input type="button" value="选择输入" onclick="selectInput(this)" /></td><td>王五</td></tr> </table> </body> </html>

上一篇:Oracle的分析函数
下一篇:程序员技术练级攻略---陈皓

相关文章

相关评论