关闭

用jquery插件实现自动添加用户

标签: jquery插件javascriptclassfunctionstylesheetxhtml
642人阅读 评论(0) 收藏 举报
分类:

<!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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:182558次
    • 积分:2237
    • 等级:
    • 排名:第16817名
    • 原创:84篇
    • 转载:0篇
    • 译文:1篇
    • 评论:24条
    文章分类
    最新评论