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 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 Javascript
vue实现虚拟列表功能的代码
Jul 28 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
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基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
详解React 在服务端渲染的实现
2017/11/16 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
python交易记录链的实现过程详解
2019/07/03 Python
python基于Selenium的web自动化框架
2019/07/14 Python
Python新手学习raise用法
2020/06/03 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
python某漫画app逆向
2021/03/31 Python
JavaScript实现班级抽签小程序
2021/05/19 Javascript
Pandas-DataFrame知识点汇总
2022/03/16 Python
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers