JQuery UI简单增加表单信息效果

刚开始学习JQuery UI，自己写了个简单的表单信息的插入，没有做验证，也很简单，和大家分享一下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>添加用户</title>
<!--引入jquery类库-->
<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
<!--引入Css样式类库文件-->
<link rel="stylesheet" href="jquery-ui-1.8.18.custom.css" />
<style>
#table1{
	border-collapse:collapse;
	border:1px #39C solid;
	}
#table1 tr,td{
	border:1px #39C solid;
	}

</style>
<script language="javascript" type="text/javascript">
//当窗体加载完毕的时候 触发该匿名函数
//$(document)  //把dom对象转换成jQuery对象
//$(document).ready(function (){});

$(function (){
			
			$("#dialog").dialog({	//创建dialog弹窗
				autoOpen:false,		//不自动打开窗口
				show:"slide",		//显示弹窗出现的效果，slide为滑动效果
				hide:"explode",		//显示窗口消失的效果，explode为爆炸效果
				resizable:false,	//设置是否可拉动弹窗的大小，默认为true
				modal:true,			//是否有遮罩模型
				buttons:[			//定义两个button按钮
					{
						text:"确定",
						click:function(){
							$(this).dialog('close');	//关闭弹窗
							$("#table1").append("<tr><td>"+$("#username").val()+"</td><td>"+$("#email").val()+"</td><td>"+$("#iphone").val()+"</td><td><input type='button' class='del' value='删除用户'></a></td></tr>");		//追加tr
								$(".del").click(function (){	
									$(this).parent().parent().remove();			//点击删除按钮移除tr
									});
							
							}	
					},
					{
						
						text:"取消",
						click:function(){
							$(this).dialog("close");	//点击取消，关闭弹窗
							}
					}
				
				]
			});
			
			$("#btn").button().click(function(){
				$("#dialog").dialog("open");		//点击button按钮，显示弹窗
				
				});
				
		
	});



</script>
</head>

<body>
	<div>
	<table width="500" id="table1">
    <tr>
        <td>姓名</td>
        <td>Email</td>
        <td>电话</td>
         <td>删除</td>
    </tr>
</table>
	<a href="javascript:void(0)" id="btn">添加用户</a>
    
    </div>
 
 	<div id="dialog" title="系统提示">
    <table width="200" border="0">
    <tr>
        <td>姓名：<input type="text" id="username" /> </td>
    </tr>
    <tr>
        <td> 邮箱：<input type="text" id="email" /></td>
    </tr>
    <tr>
        <td> 电话：<input type="text" id="iphone" /></td>
    </tr>

	</table>

    </div>
</body>
</html>

效果图1：

效果图2：