Centos系统下载大全 | Redhat系统下载大全 | Windows2012系统下载大全 | Windows2008系统下载大全| CMS教程 | 网站地图 51运维网-专注Linux/Unix系统安全运维!
当前位置:51运维网 > Web前端 > Javascript > 正文

javascript事件机制实例学习

时间:2015-04-08 10:03 来源:网络整理 作者:51ou.com 阅读:

 1、父窗体html文档:
 

复制代码 代码示例:

<html>
<head>
<title>学生管理 - javascript事件机制 - </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>

2、子窗体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>

感谢您对【51运维网 http://www.51ou.com/】的支持,我们为您免费提供《javascript事件机制实例学习》技术文章,《javascript事件机制实例学习》详细使用和说明,有时《javascript事件机制实例学习》可能不完善、敬请谅解!如果《javascript事件机制实例学习》有错误请给我们留言,我们将尽快修复文章错误,如果您觉得本站不错,请分享给周围的朋友!谢谢!

顶一下
(0)
0%
踩一下
(0)
0%
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
验证码:点击我更换图片