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使用方法

jQuery是JavaScript的一个集成库,语法简洁,它紧密集成了DOM,提供了方便的ajax的辅助方法、令人震撼的界面效果,以及可插拔的体系结构。 下面将介绍一些jQuery的关键特性:一、j...
  • xiaozhu123412
  • xiaozhu123412
  • 2016年08月07日 17:58
  • 6373

JQuery中ajax的简单使用教程(附带实例代码)

当接触一项新技术时,首先我们要问自己四个问题,如果这四个问题我们都能学习并理解到位,那么可以说这个新技术你已经完成了初步掌握,下面我们就这四个问题来说ajax应该怎么学习。如果你已经看过我写的JS中a...
  • v_111
  • v_111
  • 2017年05月02日 13:59
  • 4101

jQuery Datatable 实用简单实例

目标: 使用jQuery Datatable构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求。同时,jQuery Datatable强大的功能支持:排序,分页,搜索等。 ...
  • GarfieldEr007
  • GarfieldEr007
  • 2016年08月29日 23:59
  • 3128

Ajax Jquery的简单使用

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

简单的使用jquery的轮播、图片幻灯片代码

  • 2014年06月02日 22:33
  • 926KB
  • 下载

使用Jquery实现简单的无缝滚动(可动态)

  • 2014年03月12日 20:40
  • 39KB
  • 下载

jquery简单复制使用

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

城市选择特效,类似携程,对html侵入少,使用简单 (修复jquery引用错误)

  • 2016年01月27日 15:42
  • 76KB
  • 下载

jquery的treeview插件使用-简单介绍

简单介绍一下JQUERY中的插件Treeview的用法,主要是怕自己会忘了 地址:http://docs.jquery.com/Plugins/Treeview      (有大量的例子,下载源码...
  • wangxiaoyan1988
  • wangxiaoyan1988
  • 2011年02月21日 17:56
  • 7993

使用Struts2和jQuery EasyUI实现简单CRUD系统(五)——jsp,json,EasyUI的结合

使用Struts2和jQuery EasyUI实现简单CRUD系统(二)——jsp,json,EasyUI的结合
  • iaiti
  • iaiti
  • 2014年11月11日 10:23
  • 21738
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery的简单使用
举报原因:
原因补充:

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