jquery插件实现添加用户！

来源：互联网发布：制作荣誉证书图片软件编辑：程序博客网时间：2024/06/05 15:21
<!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><script language="javascript" type="text/jscript" src="./js/jquery-1.7.1.min.js" /></script><script language="javascript" type="text/jscript" src="./js/jquery-ui-1.8.18.custom.min.js" /></script><link rel="stylesheet" href="./css/jquery-ui-1.8.18.custom.css" /><link rel="stylesheet" href="./css/demo.css" /><script type="text/javascript" language="javascript">$(document).ready(function(){$("#dialog").dialog({ autoOpen:false,//设置对话框打开方式，不是自动打开 show:"blind",      //打开时的动画效果 hide:"explode",//关闭时的动画效果 modal:true,//是否遮罩，true表示遮罩效果，false表示非遮罩  draggable:false,//是否可以拖动效果  默认值true表示可以拖动默认值false表示不可拖动  closeOnEscape:false,//是否采用esc键退出对话框，如果false表示不采用，默认值true表示采用 title:"添加用户", //对话框的标题 position:"center",//对话框弹出位置 top bottom center left right 默认值为center width:400,//对话框宽度  height:250,//对话框高度  resizable:false,//是否可以改变的操作  如果为false表示不可改变大小  默认值为true表示可以改变大小  buttons: [{  text:"确定",click:function (){   //点击确定之后获取表单输入的值var textval=$("#name").val();var sexval=$("#sex").val();var ageval=$("#age").val();var telval=$("#tel").val();//向表格中添加用户$("#users").append("<tr align='center'><td>"+textval+"</td><td>"+sexval+"</td><td>"+ageval+"</td><td>"+telval+"</td><td><a href='#' id='del'>删除</a></td></tr>");//删除当前行$("td a").click(function (){$(this).parents("tr").remove();}); //关闭对话框 $(this).dialog("close"); }    },{  text:"取消",click:function (){   $(this).dialog("close");  }  }],});//触发连接的事件  当你点击 连接打开一个对话框$("#dialog_link").click(function (){$("#dialog").dialog("open");//open参数， 作用是打开对话框});});</script><style>    #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}</style><style>body { font-size: 10px; }label, input { display:block; }input.text { margin-bottom:12px; width:90%; }fieldset { padding:0; border:0; margin-top:25px; }h1 { font-size: 1.2em; margin: .6em 0; }div#users-contain { width: 350px; margin: 20px 0; }div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: center; }.ui-dialog .ui-state-error { padding: .3em; }.validateTips { border: 1px solid transparent; padding: 0.3em; }</style></head><body><table width="298" height="36" border="0" id="users" class="ui-widget ui-widget-content"><h3>用户列表:</h3>  <tr class="ui-widget-header " align="center">    <td width="48">姓名</td>    <td width="48">性别</td>    <td width="48">年龄</td>    <td width="57">电话</td>    <td width="63">操作</td>  </tr></table><br><br><br><br><a href="#" id="dialog_link" class="ui-state-default ui-corner-all">添加用户</a><div id="dialog" title="添加用户">    姓名：<input type="text" id="name" /><br>性别：<input type="text" id="sex" /><br>年龄：<input type="text" id="age" /><br>电话：<input type="text" id="tel" /><br></div></body></html>
效果：