首页 > web前端 > js教程 > 正文

JavaScript的事件机制

高洛峰
发布: 2016-11-25 11:40:32
原创
1325人浏览过

父窗体html文档:
<html>
<head>
  
<title>学生管理</title>
   <link rel="stylesheet" type="text/css"  href="http://www.php1.cn/">          
      
<script language="javascript" type="text/javascript">
        
        //添加学生信息  addstuinfo
        function addstuinfo(){
            
            //调用模式窗体,在模式窗体中输入学生的信息,然后传递给父窗体。
            var result = window.showmodaldialog("addinfo.html", , "dialogwidth:800px;dialogheight:300px");//result接收的就是一个数组对象

            //alert(result: + result[0]); //输出返回值,result返回的不是一个字符串,而是一个数组
            //////////////////////////下面用于判断模式add页面中所有框都为空时,不用在主窗体中执行加一行操作
            var flag = 0;
            for (i in result) {
                if (result[i].match(/^s*$/)) {
                    flag++;
                    alert(flag + ":" + result[i]);
                    
                }
            }
            if (flag == 4) return false;
            //////////////////////////
            
           
            //获取模式窗体的数据
            if (result != null || result != undefined) {//
            
            
                //alert( result:+result[0] );//输出返回值数组中的第一个值 
                addRow( result,document.getElementById( "myTable" ) );//向addRow方法中传两个参数,一个为返回的结果,一个为要操作的table
            }
        }
        
        //在当前的表中添加一行数据
        function addRow( result,myTable ){
        
            //alert( myTable );
            //tbody
            var tbody = document.createElement( "tbody" );//每次有一次条新的记录,就加入一个tbody标签到table中,tbody中可能加多个tr
            
            var tr = document.createElement( "tr" );//创建一个tr标签
            
            //添加4个td,
            for( i = 0; i < result.length;i++ ){//根据结果创建相应数目的td
            
                td = document.createElement( td );
                
                td.innerHTML = result[i];//对td进行赋值
            
                //add
                tr.appendChild( td );//将td添加到tr的后面
            }
            
            //add
            tbody.appendChild( tr );//将tr添加到tbody的后面
            myTable.appendChild(tbody); //将建好的tbody添加到要显示的的表格中,
            //以上其实就在通过document对象创建html的过程
            //注册事件        ------------------//给每次创建的tr行建立事件触发器
            tr. = function(){//////////////////////////////////////////////////鼠标移上时
                
                tr.style.backgroundColor = "#abcdef";//背景颜色
                tr.title = "单击可进行修改!";//提示信息
            };
            
            tr. = function(){//////////////////////////////////////////////鼠标释放后
            
                tr.style.backgroundColor = "";
            };
            
            //注册单击事件
            tr.onclick = function(){/////////////////////////////////////////////////////////鼠标单击时
            
                //alert();
                
                //把当前选中的数据传递给模式窗体,在模式窗体中显示当前行数据,  单元格集合 cells
                
                //alert( tr.cells[0].innerHTML );
                
                var array = new Array(5);//建立临时的数组存放要传给模式对话框的数据
                
                for( i = 0; i < tr.cells.length; i++ ){
                
                    array[i] = tr.cells[i].innerHTML;//选中行的单元格中的内容放入临时数组
                }
                
                //alert( array[2] );
                array[4] = tr;//把当前行对像传递给模式窗体,修改数据时直接通过模式窗体修改tr中的td
                
                //调用模式窗体,修改数据
                window.showModalDialog( "addinfo.html",array,"dialogwidth:800px;dialogheight:300px" );
                
            };
        
        }
        
        
</script>   
        
</head>
<body>
      <center>
      <hr>
      <form>
            <table border="3" id="myTable">
                   <caption>学生信息管理</caption>  
                   
                   <tr>
                   
                       <td ><input type="button" value="添加" onClick="addStuInfo()"/>
                            <input type="button" value="删除" />
                       </td>
                   </tr>
                   
                   <tr>
                       <th>姓名</th>
                       <th>年龄</th>
                       <th>性别</th>
                       <th>学校</th>
                       <th>是否删除</th>
                        
                   </tr>     
                   
            </table>
      
      </form>
      </center>
</body>
</html>
 
添加子窗体html文档:
<html>
<head>
    <title>添加学生信息</title>
    
    <link rel="stylesheet" type="text/css"  href="http://www.php1.cn/">        
        
<script language="javascript" type="text/javascript">
            
            
            var obj = null;
            
            //传递当前表单的数据给父窗体
            function addInfo(){
            
                if( !obj ){//obj为空时
            
                    var array = new Array();
                
                     array[0] = document.getElementById( "stuName" ).value;
                     array[1] = document.getElementById( "stuAge" ).value;
                     array[2] = document.getElementById( "stuSex" ).value;
                     array[3] = document.getElementById( "stuSchool" ).value;
                
                     //返回给父窗体
                     window.returnValue = array;
                
                }else{//直接修改父窗体中的tr
                
                    obj.cells[0].innerHTML =  document.getElementById( "stuName" ).value;  
                    obj.cells[1].innerHTML =  document.getElementById( "stuAge" ).value;  
                    obj.cells[2].innerHTML =  document.getElementById( "stuSex" ).value;  
                    obj.cells[3].innerHTML =  document.getElementById( "stuSchool" ).value;  
                }
                
                //关闭当前模式窗体
                window.close(); 
            }
            
            //获取父窗体传递的数据。
            function showInfo(){
            
                //alert();
                
                //获取父窗体中的数据
                var array = window.dialogArguments;
                
                alert( array.length );//打印父窗体传过来的数据的长度

                if (array.length > 0) {//如果父窗体传了数据过来,将调用修改
                
               
                    document.getElementById( "stuName" ).value = array[0];
                    document.getElementById( "stuAge" ).value = array[1];
                    document.getElementById( "stuSex" ).value = array[2];
                    document.getElementById( "stuSchool" ).value = array[3];
                    
                    obj = array[4];//父窗体中的tr对像
                }
                
            }
</script>
 </head>
<body onLoad="showInfo()">  
      <center>
      <hr>
              <form>
                    <table border="1">
                           <caption>添加学生信息</caption> 
                           <tr>
                               <td>姓名</td>
                               <td><input type="text" id="stuName"/></td>
                           </tr>
                           <tr>
                               <td>年龄</td>
                               <td><input type="text" id="stuAge"/></td>
                           </tr>
                           <tr>
                               <td>性别</td>
                               <td><input type="text" id="stuSex"/></td>
                           </tr>
                           <tr>
                               <td>学校</td>
                               <td><input type="text" id="stuSchool"/></td>
                           </tr>
                           <tr>
                               <td>操作</td>
                               <td><input type="button" value="确定" onClick="addInfo()" />
                                   <input type="button" value="关闭" onClick="window.close()"  />
                               </td>
                           </tr>                 
                    </table>            
              </form>
      </center>
</body>
</html>

相关标签:
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号