基于jQuery实现表格的查看修改删除

效果图：

HTML:

表id='table' tr th姓名/th年龄/th职位/th薪资/th操作/th /tr tr td张三TD/td23/TD前端工程师/TD TD TD 10000/TD TD a href=' # # # ' class=' view '查看/a a a a href=' # ' class=' del '删除/a a href='#' class='modify '修改/a /td /tr李四TD/TD33/TD TDJava程序猿/TD TD TD 12000/TD TD a href=' # ' class=' view '查看/a a a a href=' # class=' del '删除/a a href='#' class='modify '修改/a /td /tr王五TD/td25/TD美工/TD TD TD 9000/TD TD a href=' # ' class=' view '查看/a a a a href=' # ' class=' del '删除/a a href='#' class='modify '修改/a/TD/tr/table div class=' PopDiv ' PS trong姓名：/strongspan/span/p pstrong年龄：/strongspan/span/p pstrong职位：/strongspan/span/p pstrong薪资：/strong span/span/p a href=' # ' class=' close '关闭/a/div div class='修改div ' PS trong姓名：/strong输入类型='text'/p pstrong年龄：/strong输入类型='text'/p pstrong职位：/strong输入类型='text'/p pstrong薪资：/strong输入类型='text'/p a href='#' class='yes '确定/a a a a href=' # ' class=' close '取消/a /divCSS:

# table { border :1 px solid # CCC；边框塌陷：宽度width :600 px } # table tr { height :30 px } # table tr : th-child(2n){底色： # eee} #表tr th，td { border:1px固态# ccc文本对齐：中心；} td a { color:red}。popDiv { width :500 pxborder :1 px纯紫色；位置：绝对；前：50%；左侧：50%;边距-左侧：-250像素；边距-top :-100 px；背景# fffpaddings :10 pxdisplay : nonez索引：3;border:1px固体# ccc}。popDiv p {边框：1 px实心# CCCpadding:5px }。modify div { width :500 pxborder :1 px纯紫色；位置：绝对；前：50%；左侧：50%;边距-左侧：-250像素；边距-top :-100 px；背景# fffpaddings :10 pxdisplay : nonez索引：3;border:1px固体# ccc}。修改div p {边框：1 px实心# CCCpadding:5px } JQ:

$(function(){ //查看$(“TD . a . view”).单击(函数(){ /**)添加遮罩层*/var掩码hAx=$(文档)。高度();var maskWidth=$(文档)。宽度();$('div class='mask'/div ').appendTo($(“body”)；$(“div . mask”).css({ 'opacity':0.4，' background':'#000 '，' position':'absolute '，' left':0，' top':0，' width':maskWidth，' height':maskHeight，' z-index ' :2 })var arr=[]；$(这个)。父项()。兄弟姐妹()。每个（函数(){ arr.push($(this)).text())；});$('.popDiv ').显示()。儿童()。每个（函数{ $(这个)).儿童(' span ').文本(arr[I])；});$('.关闭')。单击(function(){ $(this)).父项()。hide()；$('.面具')。移除();});});//删除$('a.del ').单击(function(){ $(this)).父母(' tr ').移除();});/*修改功能*/})//在页面装载时，让所有的任务描述都拥有点击事件$(文档)。就绪（函数(){ //找到所有任务描述节点var tds=$('td ').not(' : last-child ')；//给所有的任务描述节点增加点击事件TDS。dbl点击(TD点击)；});函数TD click(){ var click函数=this//0,获取当前的任务描述节点var TD=$(this)；//1,取出当前任务描述中的文本内容保存起来var text=$(this).text()；//2,清空任务描述里边内同道明。html(" ")；//3,建立一个文本框，也就是建一个投入节点定义变量输入=$(“输入”)；//4,设置文本框中值是保存起来的文本内容input.attr('value '，text)；//4.5让文本框可以相应键盘按下的事件input.keyup(函数（事件){ //记牌器当前用户按下的键值var myEvent=event | | window。事件；//获取不同浏览器中的事件对象myEvent.keyCode//判断是否是回车键按下if(kcode==13){ var输入节点=$(this)；//获取当前文本框的内容var输入文本=输入节点。val()；//清空任务描述里边的内容，然后将内容填充到里边var tdNode=输入节点。parent()；tdnode。html(输入文本)；//让任务描述重新拥有点击事件TD节点。点击(TD点击)；} }).blur(function(){ var输入节点=$(this)；//获取当前文本框的内容var输入文本=输入节点。val()；//清空任务描述里边的内容，然后将内容填充到里边var tdNode=输入节点。parent()；tdnode。html(输入文本)；//让任务描述重新拥有点击事件TD节点。点击(TD点击)；});//5,把文本框加入到任务描述里边去td.append(输入);//5.5让文本框里边的文章被高亮选中//需要将jquery的对象转换成数字正射影像图对象var输入DOM=输入。get(0)；输入DOM。select()；//6,需要清楚任务描述上的点击事件道明。解除绑定(“点击”)；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。