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

发布时间:2014-10-22 13:50:38编辑: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的分析函数
下一篇:程序员技术练级攻略---陈皓

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款