JavaScript的事件機制

父窗體html文檔:
<html>
<head>
 
<title>學生管理</title>
   <link rel=”stylesheet” type=”text/css”  href=”css/table.css” />
         
     
<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=”css/table.css” />
       
       
<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>

You May Also Like