摄影网站免费,公司网站设计案例,室内装饰设计效果图,网站推广的名词解释今天在项目中#xff0c;刚好用到给指定的table添加一行、删除一行#xff0c;就直接找google#xff0c;搜出来的东西不尽如人意#xff0c;不是功能不好就是千篇一律#xff0c;简直浪费时间还不讨好#xff0c;于是乎就自己动手封装个#xff0c;现就把代码分享出来刚好用到给指定的table添加一行、删除一行就直接找google搜出来的东西不尽如人意不是功能不好就是千篇一律简直浪费时间还不讨好于是乎就自己动手封装个现就把代码分享出来避免大伙重复造轮子如有问题欢迎大伙拍砖指正千万可别人身攻击嘎嘎。。。 需求场景 1、添加一行 支持在任意行添加一行且可配置的如可在第一行添加一行、第二行添加一行、倒数第一行添加一行、倒数第二行添加一行随需求的变化都不会影响。 前提条件行数需在表中存在否则添加不成功。 2、删除一行 支持动态删除一行。 先演示结果如中意了在好好研究代码。 1、原始界面如下2、添加一行如要添加一行需点击“添加”按钮现点击两下会自动添加两行效果如下截图3、删除一行如要删除指定行先要选中行然后在点击“删除”按钮进行删除(这不是废话嘛~~~)现选中一行效果如下截图4、对选中行进行删除现点击“删除”按钮就会把选中的行删除掉效果如下截图代码如下 % page languagejava pageEncodingUTF-8%!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
htmlheadtitle利用jquery给指定的table添加一行、删除一行/titlemeta http-equivpragma contentno-cachemeta http-equivcache-control contentno-cachemeta http-equivexpires content0meta http-equivkeywords contentkeyword1,keyword2,keyword3meta http-equivdescription contentThis is my pagescript typetext/javascriptsrc%request.getContextPath()%/js/jquery-1.5.1.js/scriptscript typetext/javascript////添加一行、删除一行封装方法////*** 为table指定行添加一行** tab 表id* row 行数如0-第一行 1-第二行 -2-倒数第二行 -1-最后一行* trHtml 添加行的html代码**/function addTr(tab, row, trHtml){//获取table最后一行 $(#tab tr:last)//获取table第一行 $(#tab tr).eq(0)//获取table倒数第二行 $(#tab tr).eq(-2)var $tr$(#tab tr).eq(row);if($tr.size()0){alert(指定的table id或行数不存在);return;}$tr.after(trHtml);}function delTr(ckb){//获取选中的复选框然后循环遍历删除var ckbs$(input[nameckb]:checked);if(ckbs.size()0){alert(要删除指定行需选中要删除的行);return;}ckbs.each(function(){$(this).parent().parent().remove();});}/*** 全选* * allCkb 全选复选框的id* items 复选框的name*/function allCheck(allCkb, items){$(#allCkb).click(function(){$([nameitems]:checkbox).attr(checked, this.checked );});}////添加一行、删除一行测试方法///$(function(){//全选allCheck(allCkb, ckb);});function addTr2(tab, row){var trHtmltr aligncentertd width30%input typecheckbox nameckb//tdtd width30%地理/tdtd width30%60/td/tr;addTr(tab, row, trHtml);}function delTr2(){delTr(ckb);}/script/headbodytable border1px #ooo idtab cellpadding0cellspacing0 width30%tr aligncentertd width30%input idallCkb typecheckbox//tdtd width30%科目/tdtd width30%成绩/td/trtr aligncentertd width30%/tdtd width30%语文/tdtd width30%80/td /tr/tableinput typebutton οnclickaddTr2(tab, -1) value添加input typebutton οnclickdelTr2() value删除/body
/html link : http://www.cnblogs.com/linjiqin/p/3148181.html
