jquery的简单使用

原创 2013年12月04日 21:07:30
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script language="JavaScript" src="../js/jquery-1.10.2.js"></script>
  <title>添加用户</title>
  </head>
  <body>
  <center>
  <br><br>
  添加用户:<br><br>
  姓名: <input type="text" name="name" id="name" />&nbsp;&nbsp;
  email: <input type="text" name="email" id="email" />&nbsp;&nbsp;
  电话: <input type="text" name="tel" id="tel" /><br><br>
  <button id="addUser">提交</button>
  <br><br>
  <hr>
  <br><br>
  <table id="usertable" border="1" cellpadding="5" cellspacing=0>
  <tbody>
  <tr>
  <th>姓名</th>
  <th>email</th>
  <th>电话</th>
  <th>&nbsp;</th>
  </tr>
  <tr>
  <td>Tom</td>
  <td>tom@tom.com</td>
  <td>5000</td>
  <td><a href="deleteEmp?id=Tom">Delete</a></td>
  </tr>
  <tr>
  <td>Jerry</td>
  <td>jerry@sohu.com</td>
  <td>8000</td>
  <td><a href="deleteEmp?id=Jerry">Delete</a></td>
  </tr>
  </tbody>
  </table>
  </center>
  </body>
  <script language="JavaScript">
   
  $("#addUser").click(function(){
  var $name=$("#name").val();
  var $email=$("#email").val();
  var $tel=$("#tel").val();
  var $td=$("<td></td><td></td><td></td><td></td>");
   
  var $tr=$("<tr></tr>");
   
  $td.each(function(index,obj){
   
  if(index==0){
   
  $(this).html($name);
  }
  if(index==1){
   
  $(this).html($email);
  }
  if(index==2){
   
  $(this).html($tel);
  }
   
  if(index==3){
   
  $(this).append( $("<a href='#'>Delete</a>"));
  }
   
  });
  $tr.append($td);
  $("#usertable").append($tr);
  $("#addUser a").each(function (){
   
  });
   
  });
   
  function delU(){
   
  }
  </script>
  </html>
 

相关文章推荐

jquery简单复制使用

  • 2012年08月08日 10:11
  • 901KB
  • 下载

JQuery上传插件Uploadify的简单使用

在开发 web程序的时候,上传附件或是照片这是常有的事件,以前一直在使用swfupload,后来发现了Jquery的Uploadify感觉不错,就试了一下,这里做一个记录。以备使用。        ...

Ajax Jquery的简单使用

  • 2014年10月29日 22:58
  • 1.56MB
  • 下载

JQuery ZTree简单使用

JQuery ZTree简单使用@(JavaScript)[jQuery, ztree, 入门]JQuery ZTree简单使用 基本概述 案例 使用标准json数据构造ztree 使用简单json数...

jquery.autocomplete.js的简单使用

jquery.autocomplete.js这个插件使用起来还是比较方便的,这里只介绍一下最实用的。通过ajax读取数据在页面呈现。jsp页面主要代码: ...

使用超棒超简单的自定义jQuery幻灯插件-Cycle2

在线演示 Cycle2是一个超棒的jQuery幻灯插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能。支持声明式的初始样式配置,并且无须脚本可以完全支持自定义。你只需要简单的包含插件脚本,...
  • roc1010
  • roc1010
  • 2012年10月18日 20:46
  • 2090

Jquery实现简单的导航单并且经常使用

本网页利用Jquery实现一个简单并且常用的导航栏。 * { padding: 0; margin: 0; font-size: 2...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery的简单使用
举报原因:
原因补充:

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