最近要处理一些前端的工作，重新学习了一下jQuery，感觉还是那么的锋利啊！

总结了一下对桌子的增删改查，写一篇留着以后自己重新编码。

1.首先我自己写了一个简单的差异布局。

2.实现几个用a标签做的按钮的功能分别是新增修改删除查询和返回。

代码如下

html css(原谅我写在一起吧。毕竟渲染不是我的强项)

超文本标记语言标题测试数据/title/head style type=' text/CSS ' table，td{ font:100% '微软雅黑；}表格{宽度：80%；边框塌陷：margin:0 0 0 100px} th，TD { text-align : centerborder:1px实心# fff} th {背景： # 328 aa 4 } TD {背景： # E5 f1 F4；}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。8 .0 .js '/script脚本类型=' text/JavaScript ' src=' http : jq。js '/脚本正文a href=' # ' style=' margin 3360100 px ' id=' add _ BTN '新增/a输入id='Ktext '类型='text' a href='#' id='search_btn '查询/a a href=' # ' style=' margin :100 px ' id=' back _ BTN '返回/a br/表id=' TB ' tr id=' TRR ' th style=' width :100 px ' id/th style=' width :100 px ' name/th style=' width :100 px ' salary/th style=' width :100 px '功能/th/tr t body id=' hide _ t body ' tr style=' display : none ' id=' TRR ' TD style=' width :100 px ' id=' no _ id '输入值=type=' text '/TD TD TD style=' width :100 px '输入值=' type=' text '/TD TD TD style=' width :100 px '保存/a a a href=' # id=' edit _ BTN '样式=' display : none '修改/a a href='#' id='del_btn '删除/a/TD/tr/t车身t车身id=' show _ t车身' tr id=' TRR ' TD style='宽度：100 px ' id=' no _ id ' 1/TD TD TD TD style='宽度：100 px '小王/TD TD TD style=' width :100 px ' 3000/TD TD TD style=' width :200 px ' id=a ' a href=' # id=' save _ BTN ' style=' display : none '保存/a a href='#' id='edit_btn '修改/a a href='#' id='del_btn '删除/a/TD/tr tr id=' TRR ' TD style=' width :100 px ' id=' no _ id ' 2/TD TD TD TD style=' width :100 px '小李/TD TD TD style=' width :100 px ' 4000/TD TD TD style=' width :200 px ' id=' a ' a href=' # ' id=' save _ BTN '样式=' display : none '保存/a a href='#' id='edit_btn '修改/a a href='#' id='del_btn '删除/a/TD/tr tr id=' TRR ' TD style=' width :100 px ' id=' no _ id ' 3/TD TD TD TD style=' width :100 px '小张/TD TD TD style=' width :100 px ' 5000/TD TD TD style=' width :200 px ' id=' a ' a href=' # id=' save _ BTN ' style=' display : none '保存/a a href='#' id='edit_btn '修改/a a href='#' id='del_btn '删除/a/TD/tr tr id=' TRR ' TD style=' width :100 px ' id=' no _ id ' 4/TD TD TD TD style=' width :100 px '小赵/TD TD TD style=' width :100 px ' 6000/TD TD TD style=' width :200 px ' id=' a ' a href=' # ' id=' save _ BTN '样式=' display : none '保存/a a href='#' id='edit_btn '修改/a a href='#' id='del_btn '删除/a/TD/tr/t正文/表格/正文/html jQuery的代码如下

$(文档)。ready(function(){ var TB=$(' # TB ')；//添加$('#add_btn ').click(function(){ var Hidetr=$(' # hide _ t body '，tb).儿童()。first()；var newTr=hideTr.clone().show()；$('#show_tbody '，tb).追加(NewTr)；});//保存$('#save_btn '，tb).芯片('咔嚓')。live('click '，function(){ var tr=$(this).父项()。parent()；$('input[type='text']'，tr).每个（函数(I，El){ El=$(El)；el.parent().文字(El。val())；埃尔。移除()；});$('#save_btn '，tr).hide()；$('#edit_btn '，tr).show()；});//修改$('#edit_btn '，tb).芯片('咔嚓')。live('click '，function(){ var tr=$(this).父项()。parent()；$('td:not('#a ')'，tr).每个（函数(I，El){ El=$(El)；var html='输入值=' El。text()“”类型=“text”；埃尔。html(html)；});$('#edit_btn '，tr).hide()；$('#save_btn '，tr).show()；});//删除$('#del_btn '，tb).芯片('咔嚓')。live('click '，function(){ $(this).父项()。父项()。移除();});//查询$('#search_btn ').单击(function(){ var key=$('#Ktext ').val()；var s body=$(' # show _ t body ')；var trr=$('#trr '，sbody)；定义变量关键字=$('#no_id '，sbody).text()；for(var I=0；我关键字。长度；i ) {如果(关键字[i]==key[0]){ trr.eq(i).show()；}else{ trr.eq(i).hide()；} } });//返回$('#back_btn ').click(function(){ var sbody=$(' # show _ t body ')；$('#trr '，sbody).show()；});});虽然有点简陋不过还是蛮实用的。功能展示如下

其中查询功能是按照身份来进行查询的，点返回后可以复原数据。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。