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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
js getElementsByTagName的简写方式
Jun 27 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 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
怎样辨别一杯好咖啡
2021/03/03 新手入门
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
php事件驱动化设计详解
2016/11/10 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
js数组操作学习总结
2013/11/04 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
Python迭代器定义与简单用法分析
2018/04/30 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
毕业生自我鉴定
2013/12/04 职场文书
求职毕业生自荐书
2014/02/08 职场文书
辅导员评语
2014/05/04 职场文书
医药销售自荐书
2014/05/29 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
医院消毒隔离制度
2015/08/05 职场文书
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android