jQuery实现添加删除

用jQuery实现添加删除
用原生js实现的代码：https://blog.csdn.net/m0_53679993/article/details/124179917?spm=1001.2014.3001.5502

 <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@tom.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><input type="text" name="empName" id="empName"></td></tr><tr><td class="word">Email:</td><td><input type="text" name="email" id="email"></td></tr><tr><td class="word">Salary:</td><td><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>

  /*1.添加2.删除*/$('addEmpButton').click(function(){//1.收集输入的数据var $empName = $('#empName') var $email = $('#email') var $salary = $('#salary') var empName = $empName.val() var email = $email.val()var salary = $salary.vai()//2.生成对应的<tr>标签结构，并插入#employeeTable的tbody中$('<tr></tr>').append('<td>'+empName+'</td>')// 拼串.append('<td>'+email+'</td>').append('<td>'+salary+'</td>').append('<td>< a href="deleteEmp?id="'+Date.now()+'>Delete</ a></td>').appendTo('#employeeTable>tbody')//3.清除输入$empName.val('') $email.val('')$salary.val('')})//给所有删除连接绑定监听$('#employeeTable a').click(clickDelete)//点击删除的回调函数function clickDelete(){var $tr =$(this).parent().parent()var name = $tr.children(':first').html()if(confirm('确定删除'+name+'吗?')){$tr.remove()}return false}

jQuery实现添加删除相关推荐

JQuery动态添加/删除class样式
有时我们会对某个控件的class样式进行获取.添加.修改.删除.下面是简单整理的一些实例用法: html样例代码如下: <ul class="pro_list fl cont" ...
[PHP] JQuery+Layer实现添加删除自定义标签代码
JQuery+Layer实现添加删除自定义标签代码实现效果如下: 实现代码如下: <!doctype html> <html> <head> <meta c ...
jQuery使用toggleClass方法动态添加删除Class样式的方法
本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法.分享给大家供大家参考.具体分析如下: jQuery通过toggleClass方法动态添加删除Class,一次执 ...
jQuery HTML 添加和删除元素
jQuery - 添加元素通过 jQuery,可以很容易地添加新元素/内容. 添加新的 HTML 内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() ...
jquery中添加属性和删除属性--------------------
jquery中添加属性和删除属性: 复制代码代码如下: $("#2args").attr("disabled",'disabled'); $("#2 ...
jQuery 添加删除元素
通过 jQuery,可以很容易地添加新元素/内容. 添加新的 HTML 内容我们将学习用于添加新内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() ...
利用jquery动态添加和删除表格的一行，并且保存单行数据
开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...
jq增加删除html标签,jQuery添加\删除元素
jQuery添加\删除元素 html> jquery添加和删除元素 $(function(){ //添加元素 //元素内部添加 //append()在被选元素的结尾插入内容; // $('but ...
jq添加或删除html元素,jQuery添加删除DOM元素方法详解
本文实例分析了jQuery添加删除DOM元素的方法.分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM ...

jQuery实现添加删除

jQuery实现添加删除相关推荐

最新文章

热门文章