<!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>jquery插件实现自动添加用户</title>
<script language="javascript" type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<!--引进css样式类库文件-->
<link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css">
<script language="javascript">
$(document).ready(function(){
//注册对话框
$("#dialog-form").dialog({
autoOpen:false,
modal:true,
width:350,
height:300,
buttons:{
"添加":function(){
$("#users").append("<tr>"+"<td>"+$("#name").val()+"</td>"+"<td>"+$("#email").val()+"</td>"+"<td>"+$("#password").val()+"</td>"+"</tr>");
$(this).dialog("close");
},
"取消":function(){
$(this).dialog("close");
},
}
});
$("#create-user").click(function(){
$("#dialog-form").dialog("open");
});
});
</script>
</head>
<body>
<div class="demo">
<div id="dialog-form" title="添加用户">
<form>
<label for="name">Name</label><br>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /><br>
<label for="email">Email</label><br>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /><br>
<label for="password">Password</label><br>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
</form>
</div>
<div id="users-contain" class="ui-widget">
<table id="users" class="ui-widget ui-widget-content">
<tr class="ui-widget-header ">
<th>Name</th>
<th>Email</th>
<th>Password</th>
</tr>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>johndoe1</td>
</tr>
</table>
</div>
<button id="create-user">Create new user</button>
</div><!-- End demo -->
</body>
</html>
