jQuery实现用户信息表格的添加和删除功能


Posted in jQuery onSeptember 12, 2017

 1、浏览器界面

jQuery实现用户信息表格的添加和删除功能

一个简单的用户信息操作

2、html代码

<body>
  <form name="userForm">
    <center>
      用户录入
      <br />
      用户名:
      <input id="username" name="username" type="text" size=15 />
      E-mail:
      <input id="email" name="email" type="text" size=15 />
      电话:
      <input id="tel" name="tel" type="text" size=15 />
      <input type="button" value="添加" id="btn_submit" />
      <input type="button" value="删除所有" id="btn_removeAll" />
    </center>
  </form>
  ----------------------------
  <hr />
  <table border="1" align="center" cellpadding=0 cellspacing=0 width=400>
    <thead>
      <tr>
        <th>用户名</th>
        <th>E-mail</th>
        <th>电话</th>
        <th>操作</th>
      </tr>
    </thead>
    ----------------------------
    <tbody id="userTbody">
      <tr>
        <td>乔峰</td>
        <td>qiao@163.com</td>
        <td>18212345678</td>
        <td>
          <a href='#' class='myClz'>删除</a>
        </td>
      </tr>
    </tbody>
    ----------------------------
  </table>
</body>

3、jQuery实现

$(function () {
  $("#btn_submit").click(function () {
    // 获取用户输入的值
    var usernameVal = $("#username").val();
    var emailVal = $("#email").val();
    var telVal = $("#tel").val();
    var tr = "<tr><td>" + usernameVal + "</td><td>" + emailVal
      + "</td><td>" + telVal
      + "</td><td><a href='#' class='myClz'>删除</a></td></tr>";
    $("#userTbody").append(tr);
  });
  // 全部删除
  $("#btn_removeAll").click(function () {
    $("#userTbody").empty();
  });
  //删除一行数据
  /*click只对本身页面有的元素有作用,对于后面新加的元素,不起作用
     $(".myClz").click(function() {
       console.log(123);
     });
   */
  /*选择id=userTbody元素下所有样式名含有myClz的标签,并添加click事件
   *当点击后,向上一级找到tr元素,然后删除
  */
  $('#userTbody').on('click', ".myClz", function () {
    $(this).closest('tr').remove();
  });
});

总结

以上所述是小编给大家介绍的jQuery实现用户信息表格的添加和删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jquery实现抽奖功能
Oct 22 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 #jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 #jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 #jQuery
jQuery事件对象的属性和方法详解
Sep 09 #jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 #jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 #jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 #jQuery
You might like
php写的简易聊天室代码
2011/06/04 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
php处理带有中文URL的方法
2016/07/11 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
jQuery1.6 使用方法一
2011/11/23 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
python实现控制台输出颜色
2021/03/02 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
护士试用期自我鉴定
2014/02/08 职场文书
新年晚会主持词
2014/03/24 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
导游词之西安大清真寺
2019/12/17 职场文书