【jQuery】添加删除记录练习

最新推荐文章于 2022-04-15 19:00:01 发布
最新推荐文章于 2022-04-15 19:00:01 发布
阅读量114 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/WX1211/p/11194648.html
版权 

 功能说明:
   1. 点击'Submit', 根据输入的信息在表单中生成一行员工信息
   2. 点击Delete链接, 提示删除当前行信息, 点击确定后删除信息
   技术要点:
   1. DOM查询
   2. 绑定事件监听
   3. DOM增删改
   4. 取消事件的默认行为
<!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">
  <title>添加删除记录练习</title>
  <link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>

<table id="employeeTable">
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Salary</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>tom@tom.com</td>
    <td>5000</td>
    <td><a href="deleteEmp?id=001">Delete</a></td>
  </tr>
  <tr>
    <td>Jerry</td>
    <td>jerry@sohu.com</td>
    <td>8000</td>
    <td><a href="deleteEmp?id=002">Delete</a></td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>bob@tom.com</td>
    <td>10000</td>
    <td><a href="deleteEmp?id=003">Delete</a></td>
  </tr>

</table>

<div id="formDiv">

  <h4>添加新员工</h4>

  <table>
    <tr>
      <td class="word">name:</td>
      <td class="inp">
        <input type="text" name="empName" id="empName"/>
      </td>
    </tr>
    <tr>
      <td class="word">email:</td>
      <td class="inp">
        <input type="text" name="email" id="email"/>
      </td>
    </tr>
    <tr>
      <td class="word">salary:</td>
      <td class="inp">
        <input type="text" name="salary" id="salary"/>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <button id="addEmpButton" value="abc">
          Submit
        </button>
      </td>
    </tr>
  </table>
</div>

<script src="jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  /*
   功能说明:
   1. 点击'Submit', 根据输入的信息在表单中生成一行员工信息
   2. 点击Delete链接, 提示删除当前行信息, 点击确定后删除信息
   技术要点:
   1. DOM查询
   2. 绑定事件监听
   3. DOM增删改
   4. 取消事件的默认行为
   */
  $(function () {
    $('#addEmpButton').click(function () {
      var $empName = $('#empName')
      var $email = $('#email')
      var $salary = $('#salary')

      var empName = $empName.val()
      var email = $empName.val()
      var salary = $empName.val()
      var id = Date.now()

      /*
       <tr>
         <td>Bob</td>
         <td>bob@tom.com</td>
         <td>10000</td>
         <td><a href="deleteEmp?id=003">Delete</a></td>
       </tr>
       */
      $('<tr></tr>')
        .append('<td>'+empName+'</td>')
        .append('<td>'+email+'</td>')
        .append('<td>'+salary+'</td>')
        .append('<td><a href="deleteEmp?id="'+id+'>Delete</a></td>')
        .appendTo('#employeeTable')
        .find('a')
　/*调用函数*/
        .click(clickA)

      $empName.val('')
      $email.val('')
      $salary.val('')

    })

/*调用函数*/
    $('a').click(clickA)
function clickA (event) {
      event.preventDefault()
      var $tr = $(this).parent().parent()
      var name = $tr.children('td:first').html()
      if(confirm('确定删除'+name+'吗?')) {
        $tr.remove()
      }
    }

  })


</script>
</body>
</html>

 

转载于:https://www.cnblogs.com/WX1211/p/11194648.html

weixin_30322405
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
增加记录 删除记录 修改记录 查询记录 显示数据库 删除数据库
qq_37171379的博客
01-15 677
1、SQL简介 SQL(Structured Query Language)结构化查询语言。 SQL就是操作数据的一种语言。 2、增加记录 语法格式：INSERT INTO table_name(字段1,字段2,字段3,…) VALUES(值1,值2,值3,…) 语法说明 INSERT INTO是添加数据的SQL命令。 table_name要添加的数据表。 表的字段列表，要与值的列表，一一对应。 ...
JS-案例-增加和删除节点
worm
09-03 2214
需求：  /*  * 为 #employeetable 的所有的 a 节点添加 Onclick 响应函数:  * 1. 弹出确认对话框: 确定要删除 xx 的信息吗? xx 为当前 a 节点所在的 td 所在的 tr 的  * 第一个 td 子节点的文本值, 且要去除前后空格.  * 2. 若点击 "确认" , 则删除 a 节点的所在的 行  *  * 注意:  * 1. a 节点
3天业界好评一致的jQuery教程（含资料）
01-06
Jquery是继prototype之后又一个优秀的 Javascrīpt 框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种 应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jörn Zaefferer，罗马尼亚的Stefan Petre等等。jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。jQuery是使用最广的JS函数库， 它能帮我们程序员简化DOM查询及DOM操作， 轻松实现动画效果。在世界前10000个访问最多的网站中，有超过 55 %在使用jQuery。 本视频全面深入讲解jQuery库的使用技术， 以及基于jQuery的项目开发技巧。
jQuery实现添加删除记录
yuanmomoya的博客
08-29 1558
实现删除（询问是否删除），和添加 其中最重要的是//动态给a标签委派事件 没有学动态前，我们添加完员工后再去删除，这时在添加完员工后又添加了删除事件，但是也带来的多次绑定删除事件。实例中的注释的代码可以看出，也可亲自试一下 还有就是事件绑定的迭代 用到的CSS @CHARSET "UTF-8"; #total { width: 450px; margin-left: a...
JS添加删除记录练习
weixin_43571052的博客
03-07 419
效果图 html和JS代码 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text
jquery对table中各数据的增加、保存、删除操作示例
12-12
像这种页面，我们往往不是通过提交表单来处理这些数据，因为如果在后台去遍历处理这些大量的数据是非常繁琐的；比较好的做法是在前台页面中将数据以对象形式保存在json中，然后在后台直接将json转换成我们需要的对象，这样我们的直接可以处理对象了！ 添加按钮 代码如下: <input name=”button” type=”button” value=”添加” onClick=”addRowForPswdBasicFillTemplate(‘pswd_basic_fill_template’)”> table id是pswd_basic_fill_template 添加方法 代码如下: func
jQuery 练习：动态添加和删除行记录
weixin_46102920的博客
10-12 271
confirm() 是 JavaScript 语言提供的一个确认提示框函数，会提示传入的参数。 若用户点击确定，返回true；若用户点击取消，返回false。 return false;   可以阻止元素的默认行为。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Con
JSJQ-删除表格信息
anhu8321的博客
11-30 182
一、知识点 　　var chils= s.childNodes; //得到s的全部子节点　　var par=s.parentNode; //得到s的父节点　　var ns=s.nextSbiling; //获得s的下一个兄弟节点　　var ps=s.previousSbiling; //得到s的上一个兄弟节点　　var fc=s.firstChild; //获得s的第一个...
jQuery关于添加删除记录
希冀
04-07 263
当我们填写了信息以后，信息会提交到上面的表格里。在上面还可以进行删除操作。 话不多说，直接上代码。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv...
JQurey在表格中动态增加、删除指定行
xgysimida的博客
01-15 471
最近在做项目的时候需用JQuery动态的增加或者删除指定的行，废话不多说，直接看下图， 1.原始的界面 2.增加指定行后的界面 3.删除指定行后的界面 要实现的功能比较简单，还是希望对新手们有帮助吧，代码如下： &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="application/...
jquery实现滑动删除记录
西决987654的博客
03-18 447
//滑动删除客户 $(".sort_list").on('swipe',function(){ $this=$(this); $this.find(".score").hide(); setTimeout(function(){$this.find(".towbtn").fadeIn();},300); }); $(".del").click(function(){ $this=$(
.88添加删除记录练习
sanda_nd的博客
04-15 92
效果：
JavaScrip之添加删除记录
iTLUCK
11-26 118
JavaScrip 添加删除记录 <!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"> <title>添加删除记录练习</title>
table表格每一行增加和删除功能，增加是指在当前行后面，删除是删除当前行
Christine
06-06 3141
function insertAfter(newElement,targetElement){    var parent = targetElement.parentNode;    if(parent.lastChild == targetElement){        parent.appendChild(newElement);    }else{        parent.inser...
添加删除记录练习
清新de菜的博客
06-25 90
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="s.
JavaScript 添加删除记录
丑小鸭
08-05 581
代码示例： 1 JS代码 1）声明myClick函数： function myClick(id,fun){            btn=document.getElementById(id);            btn.onclick=fun;        }  2）添加：  2.1 复杂版：  myClick("btn",function(){          //得到输入...
jQuery添加删除
weixin_30553065的博客
02-26 94
//代码 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>添加记录练习<title> <link rel="stylesheet" type="text/css" href="css.css"/> </...
jQuery(六)——综合练习：添加、删除记录
HangHug_L的博客
02-01 340
先学习下confirm函数： confirm 是JavaScript语言提供的一个确认提示框函数。 你给它传什么，它就提示什么，当用户点击了确定，就返回true。当用户点击了取消，就返回false。 confirm("我是陆亿行-2021-02-01"); 实现的界面如下所示： 需要实现如下功能： d 1. 初始化代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
[JQ权威指南]第十六天：删除记录时的提示效果
德仔
09-02 1769
1.当用户单击“删除”按钮时候，整个页面背景类似关机效果，“删除”提示框突出显示，用户可以选择“关闭”按钮，或单击“确定”或“取消”操作 2.删除提示框一直居中显示，无论页面大小如何变化 3。如果对某条记录打勾，当用户单击提示框中的确定按钮时候，将在页面中删除该记录，同时关闭提示框，页面背景恢复正常。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra
jquery history添加历史记录
最新发布
04-28
你可以使用 jQuery 插件 jQuery BBQ (Back Button & Query Library) 来添加历史记录。这个插件可以让你在 URL 中添加查询参数，同时也可以在浏览器的历史记录中添加条目。 以下是添加历史记录的示例代码： ``` $....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值