JavaScript的事件机制

父窗体html文档： 学生管理 //添加学生信息 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 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 array[i] = tr.cells[i].innerHTML;//选中行的单元格中的内容放入临时数组 } //alert( array[2] ); array[4] = tr;//把当前行对像传递给模式窗体，修改数据时直接通过模式窗体修改tr中的td //调用模式窗体，修改数据 window.showModalDialog( "addinfo.html",array,"dialogwidth:800px;dialogheight:300px" ); }; } 学生信息管理 姓名 年龄 性别 学校 是否删除 添加子窗体html文档: 添加学生信息 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对像 } } 添加学生信息 姓名 年龄 性别 学校 操作

JavaScript的事件机制

Articles Liés