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 相关文章推荐
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
微信小程序url与token设置详解
Sep 26 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
javascript单张多张图无缝滚动实例代码
May 10 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 设计模式之观察者模式介绍
2012/02/22 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
python中精确输出JSON浮点数的方法
2014/04/18 Python
Python日志模块logging基本用法分析
2018/08/23 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
python变量命名的7条建议
2019/07/04 Python
python多进程并发demo实例解析
2019/12/13 Python
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
应届中专生自荐书范文
2014/02/13 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
资料员岗位职责
2015/02/10 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
SSM VUE Axios详解
2021/10/05 Vue.js
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python
基于Python实现nc批量转tif格式
2022/08/14 Python