刚开始学习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：
