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 相关文章推荐
关于递归运算的顺序测试代码
Nov 30 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 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中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
海量经典的jQuery插件集合
2010/01/12 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
python多重继承新算法C3介绍
2014/09/28 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
马云的职业生涯规划之路
2014/01/01 职场文书
《理想》教学反思
2014/02/17 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
对照四风自我剖析材料
2014/10/07 职场文书