juery动态添加删除表格中的行
2015-12-28 00:00
351 查看
摘要: juery动态添加删除表格中的行
演示地址:http://www.jupitercode.com/demo/js/table/dynamicrow.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <table class="table-bordered col-sm-8" id="menuActions"> <thead> <tr> <th>编码</th> <th>名称</th> <th>功能(正则表达式)</th> </tr> </thead> <tbody> <tr> <td><input type="text" name="" value="add" /></td> <td><input type="text" name="" value="新增" /></td> <td><input type="text" name="" value="add" /></td> <td><button>删除</button></td> </tr> <tr> <td><input type="text" name="" value="update" /></td> <td><input type="text" name="" value="修改" /></td> <td><input type="text" name="" value="update" /></td> <td><button>删除</button></td> </tr> <tr> <td colspan="4"><button id="addMenuActions">添加</button></td> </tr> </tbody> <table> </body> <script type="text/javascript" src="/static/js/jquery.min.js" ></script> <script type="text/javascript"> $(document).ready(function() { $("#addMenuActions").click(function(){ var newLine = "<tr><td><input class=\"form-control\" type=\"text\"/></td><td><input class=\"form-control\" type=\"text\"/></td><td><input class=\"form-control\" 7fe0 type=\"text\" /></td><td><button class=\"removeMenuActions\">删除</button></td></tr>"; $(this).parent().parent().before(newLine); }); $("#menuActions").on('click', ".removeMenuActions", function(){ $(this).parent().parent().remove(); }); }); </script> </html>
演示地址:http://www.jupitercode.com/demo/js/table/dynamicrow.html
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JavaScript 各种遍历方式详解
- 数组方法汇总
- 表格标签table深入了解
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作