插件实现添加用户信息到页面表格

原创 2012年03月28日 19:31:09

<!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>
<style>
  body { font-size: 62.5%; }
  label, input { display:block; }
  input.text { margin-bottom:12px; width:95%; padding: .4em; }
  fieldset { padding:0; border:0; margin-top:25px; }
  h1 { font-size: 1.2em; margin: .6em 0; }
  div#user-info { width: 350px; margin: 20px 0; }
  div#user-info table { margin: 1em 0; border-collapse: collapse; width: 100%; }
  div#user-info table td, div#user-info table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
  .ui-dialog .ui-state-error { padding: .3em; }
  .validateTips { border: 1px solid transparent; padding: 0.3em; }
 </style>
<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>
<link type="text/css" href="./css/jquery-ui-1.8.18.custom.css" rel="stylesheet"><script type="text/javascript" language="javascript">
    $(function() {
 
  $( "#dialog:ui-dialog" ).dialog( "destroy" );
  
  var name = $( "#name" ),
   email = $( "#email" ),
   password = $( "#password" ),
   allFields = $( [] ).add( name ).add( email ).add( password ),
   tips = $( ".validateTips" );

  function updateTips( t ) {
   tips
    .text( t )
    .addClass( "ui-state-highlight" );
   setTimeout(function() {
    tips.removeClass( "ui-state-highlight", 1500 );
   }, 500 );
  }

  $( "#dialog-form" ).dialog({
   autoOpen: false,
   height: 300,
   width: 350,
   modal: true,
      buttons: {
    "创建一个新用户": function() {
      $( "#users tbody" ).append( "<tr>" +
       "<td>" + name.val() + "</td>" +
       "<td>" + email.val() + "</td>" +
       "<td>" + password.val() + "</td>" +
      "</tr>" );
      $( this ).dialog( "close" );
     
    },
    "取消": function() {
     $( this ).dialog( "close" );
    }
   },
   close: function() {
    allFields.val( "" ).removeClass( "ui-state-error" );
   }
  });

  $( "#create-user" )
   .button()
   .click(function() {
    $( "#dialog-form" ).dialog( "open" );
   });
 
  });


</script>
</head>

<body>
<div id="demo">
<div id="dialog-form" title="Create new user">
 <form>
 <fieldset>
  <label for="name">姓名:</label>
  <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
  <label for="email">邮箱:</label>
  <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
  <label for="password">密码:</label>
  <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
 </fieldset>
 </form>
</div>
<!--页面表格信息-->
<div id="user-info" class="ui-widget">
<table id="users" class="ui-widget ui-widget-content" border="1">
    <h1>增加用户信息</h1>
    <thead>
   <tr class="ui-widget-header ">
    <th>姓名</th>
    <th>邮箱</th>
    <th>密码</th>
   </tr>
  </thead>
    <tbody>
 <tr>
    <td>John Doe</td>
    <td>john.doe@example.com</td>
    <td>johndoe1</td>
   </tr>
  </tbody>
</table>
</div>
<input type="button" id="create-user" value="创建一个新用户">
 
</div>
</body>
</html>

效果图:

使用Bootstrap和Vue实现用户信息的编辑

使用Bootstrap和Vue实现用户信息的编辑使用Bootstrap实现简单的布局,并结合Vue进行用户信息的编辑删除等功能...
  • KodeLiang
  • KodeLiang
  • 2017年10月24日 22:57
  • 262

js+php简单实现下载页面中当前显示的表格内容

对于这个问题,今天终于找到了一个比较简单的方法,hin开森,分享记录下! 一、首先不管用何种方法,将表格内容显示到页面上! 二、设置一个按钮,增加点击事件方法,如: /*下载表格*/ func...
  • cxl15371737627
  • cxl15371737627
  • 2017年09月29日 16:11
  • 153

通过js,给jsp页面添加表格及数据

/** *创建table *zhangxiaojun 2011-01-06 */ function createTableOfStatus(status){ var div = ...
  • mycup163
  • mycup163
  • 2011年01月07日 09:20
  • 2172

网页中表格还可以这样处理~一个强力的火狐表格插件TableTools2介绍

数据就在网页上,复制黏贴实在烦,即使辛苦搞下来,还得费力来清理,导到excel搞图表,还得word做表报。呵呵,自己写了一首打油诗。其实这也是曾经从网页上获取过数据的兄弟姐妹的普遍苦恼。 最近发现一...
  • loveyy1010
  • loveyy1010
  • 2017年06月16日 09:42
  • 780

用户信息修改页面搭建

修改用户 1>携带参数跳转: 修改 2>UserInfoController:添加更新用户方法 /** * 加载修改页面 * @param user * @para...
  • zhuyu714997369
  • zhuyu714997369
  • 2016年06月02日 15:19
  • 1660

Struts学习总结(八)---使用Struts2实现用户信息的CRUD操作(二:添加操作)

使用Struts2实现用户信息的CRUD操作(二:添加操作)
  • wu631464569
  • wu631464569
  • 2016年09月01日 16:56
  • 763

登陆页面的用户信息保存实现

本次试验说的是Android开发中的用户名和密码的保存实现,首先我们需要掌握一个知识点就是SharedPreference。SharedPreference 介绍SharedPreferences是A...
  • u013359215
  • u013359215
  • 2015年06月05日 13:41
  • 1358

js导出页面表格数据到Excel

js导出页面表格数据到Excel,可自定义Excel文件名
  • sxdfx
  • sxdfx
  • 2017年06月08日 14:12
  • 1129

缓冲输入输出流实现用户登录注册

package cn.itcast.buffered; import java.io.BufferedReader; import java.io.BufferedWriter; import ja...
  • CSDN_GIA
  • CSDN_GIA
  • 2016年11月16日 15:21
  • 571

JavaScript实现动态添加页面的表格行数并获取数据

JavaScript实现动态添加页面的表格行数并获取数据,获取后的数据按照特殊的方式拼接存入数据库,用的时候再把它解析出来就行了。 车型 数量 ...
  • YEN_CSDN
  • YEN_CSDN
  • 2017年02月13日 18:04
  • 4023
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:插件实现添加用户信息到页面表格
举报原因:
原因补充:

(最多只允许输入30个字)