jQuery动态增减行的实例代码解析(推荐)


Posted in Javascript onDecember 05, 2016

先给大家展示下效果图:

这是没有增加时的界面:

jQuery动态增减行的实例代码解析(推荐) 

增加后的界面:

jQuery动态增减行的实例代码解析(推荐) 

删除后的界面:

jQuery动态增减行的实例代码解析(推荐)

原因分析:

不擅长jquery和JavaScript

场景:

代码如下:

<table class="table table-bordered">
<thead>
<tr>
<th style="width: 10px">?次</th>
<th style="width: 100%">比??r?</th>
<th>比??龅?lt;/th>
<th>主?</th>
<th>主?得分</th>
<th>客?</th>
<th>客?得分</th>
<th>比??果</th>
<th>删除</th>
</tr>
</thead>
<tbody id="Games_tbody">
<tr>
<td>
<input type="number" style="width: 40px"/>
</td>
<td>
<input type="date" style="width: 140px"/>
</td>
<td>
<input type="text" style="width: 140px"/>
</td>
<td>
<input type="text" style="width: 140px"/>
</td>
<td>
<input type="number" style="width: 80px"/>
</td>
<td>
<input type="text" style="width: 140px"/>
</td>
<td>
<input type="number" style="width: 80px"/>
</td>
<td>
<input type="text" style="width: 40px"/>
</td>
<td>
<button type="button" class="btn btn-danger btn-xs" id="delete" onclick="$(this).parent('td').parent('tr').remove()">删除</button>
</td>
</tr>
<tr>
<td>
<input type="number" style="width: 40px"/>
</td>
<td>
<input type="date" style="width: 140px"/>
</td>
<td>
<input type="text" style="width: 140px"/>
</td>
<td>
<input type="text" style="width: 140px"/>
</td>
<td>
<input type="number" style="width: 80px"/>
</td>
<td>
<input type="text" style="width: 140px"/>
</td>
<td>
<input type="number" style="width: 80px"/>
</td>
<td>
<input type="text" style="width: 40px"/>
</td>
<td>
<button type="button" class="btn btn-danger btn-xs" id="delete" onclick="$(this).parent('td').parent('tr').remove()">删除</button>
</td>
</tr>
</tbody>
</table>
<button type="button" id="add_game"class="btn btn-primary btn-md">
<span class="glyphicon glyphicon-plus-sign"></span> 
</button>
<button type="button" id="reduce_game" class="btn btn-primary btn-md">
<span class="glyphicon glyphicon-minus-sign"></span> 
</button>

解决方案:

增加:在tbody后直接增加自定义好的html变量,使用append方法就好了

jquery代码如下:

<script src="../jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="../morris/morris.min.js"></script>
<!-- FastClick -->
<script src="../fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../dist/js/demo.js"></script>
<!-- page script -->
<script type="text/javascript">
function deleteCol()
{
alert("delete col method");
alert(this.tagName);
//$(this).parent("td").parent("tr").remove();
}
</script>
<script>
$(document).ready(function () {
// 增加行
var trEle='<tr>'+
'<td><input type="number" style="width: 40px"/>'+'</td>'+
'<td><input type="date" style="width: 140px"/>'+'</td>'+
'<td><input type="text" style="width: 140px"/>'+'</td>'+
'<td><input type="text" style="width: 140px"/>'+'</td>'+
'<td><input type="number" style="width: 80px"/>'+'</td>'+
'<td><input type="text" style="width: 140px"/>'+'</td>'+
'<td><input type="number" style="width: 80px"/>'+'</td>'+
'<td><input type="text" style="width: 40px"/>'+'</td>'+
'<td><button type="button" class="btn btn-danger btn-xs" id="delete" onclick="$(this).parent('+
"'td').parent('tr').remove()"+
'">删除</button></td></tr>'
$("#add_game").click(function(e){
$("#Games_tbody").append(trEle);
});
//删除行数,绑定在html中的button Click事件中了
});
</script>

问题原因:

jquery没有onclick()函数,但是这里可以用(不知道为什么,因为我是菜鸟),不知道使用each()函数是否可以使用。不知道为什么直接使用下面代码不可以用

$(".btn-danger").click(function(){
$(this).parent('td').parent(‘tr').remove();
});

只能选择第一个,后面的就没办法选定了。

在解决的过程中,我借用了这篇博客

发现原来页面上的可以实现删除,但是动态增加后的行数,却无法删除

最后还是借用了

http://bbs.csdn.net/topics/390917779

这里面的一个回答,才发现原来函数可以直接卸载html里面。而在增加行中,也可以使用clone函数,会更加方便,也就是第二种方法。

第二种方法,选择tr属性,然后借用clone(),代码如下:

$("#add_game").click(function(e){
//$("#Games_tbody").append(trEle); 第一种方法
//第二种方法 $("#Games_tbody>tr:first").clone(true).appendTo($("#Games_tbody"));
});

也可以实现增加行,同时,点击删除也可以,(在上面提过的这篇博客

这时可以删除,好奇怪!)

总结来说,通过拼接html来实现增加的行数无法实现删除按钮,解决方法是把删除方法绑定在html中。

但是,如果,你的行数是通过clone()方法来实现的话,可以实现删除按钮。

以上所述是小编给大家介绍的jQuery动态增减行的实例代码解析(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
获取url中用&amp;隔开的参数实例(分享)
May 28 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
nuxt引入组件和公共样式的操作
Nov 05 Javascript
DOM 事件的深入浅出(二)
Dec 05 #Javascript
vue.js指令v-model实现方法
Dec 05 #Javascript
DOM 事件的深入浅出(一)
Dec 05 #Javascript
使用微信小程序开发前端【快速入门】
Dec 05 #Javascript
学习vue.js表单控件绑定操作
Dec 05 #Javascript
JavaScript易错知识点整理
Dec 05 #Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 #Javascript
You might like
PHP中的日期加减方法示例
2014/08/21 PHP
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
python list 合并连接字符串的方法
2013/03/09 Python
python实现数通设备端口监控示例
2014/04/02 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
数控专业个人求职信范文
2014/02/05 职场文书
有关爱国演讲稿
2014/05/07 职场文书
2015年公司新年寄语
2014/12/08 职场文书
捐款感谢信
2015/01/20 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android