实例详解jQuery动态增减行

  • 更新时间:2020-03-09 12:01:53
  • 编辑:权商丽
为网友们分享了jQuery相关的编程文章,网友谭英勋根据主题投稿了本篇教程内容,涉及到jquery、动态增减行、jQuery动态增减行的实例代码解析(推荐)相关内容,已被469网友关注,涉猎到的知识点内容可以在下方电子书获得。

参考资料

正文内容

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

先给大家展示下效果图:

这是没有增加时的界面:

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

增加后的界面:

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

删除后的界面:

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

原因分析:

不擅长jquery和JavaScript

场景:

代码如下:

<table class="table table-bordered">
<thead>
<tr>
<th >輪次</th>
<th >比賽時間</th>
<th>比賽場地</th>
<th>主隊</th>
<th>主隊得分</th>
<th>客隊</th>
<th>客隊得分</th>
<th>比賽結果</th>
<th>删除</th>
</tr>
</thead>
<tbody id="Games_tbody">
<tr>
<td>
<input type="number" />
</td>
<td>
<input type="date" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="text" />
</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" />
</td>
<td>
<input type="date" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="number" />
</td>
<td>
<input type="text" />
</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" />'+'</td>'+
'<td><input type="date" />'+'</td>'+
'<td><input type="text" />'+'</td>'+
'<td><input type="text" />'+'</td>'+
'<td><input type="number" />'+'</td>'+
'<td><input type="text" />'+'</td>'+
'<td><input type="number" />'+'</td>'+
'<td><input type="text" />'+'</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();
});

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

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

//www.jb51.net/article/94519.htm

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

最后还是借用了

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"));
});

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

//www.jb51.net/article/94519.htm

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

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

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

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

jQuery相关教程

  • jquery.validate.js插件使用经验记录

    工作中使用到了jquery.validate.js插件,下面将其用法整理一下,方便以后使用

    发布时间:2019-08-28

  • jquery中子元素和后代元素的区别示例介绍

    后代,就是当前元素的所有后代,都算,子元素,就是当前元素的子集,再往下走就不算了

    发布时间:2019-08-28

  • jQuery EasyUI开发指南

    jQuery EasyUI开发指南

    使用Java开发软件的开发人员一定会接触到前端开发,而前端开发有一个流行趋势,那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种

    大小:48.4 MBjQuery电子书

  • 锋利的jQuery

    锋利的jQuery

    《锋利的jQuery(第2版)》是《锋利的jQuery》升级版版,事例选用全新升级的UI,编码更合乎词义化;提升jQueryMobile的章节目录;提升jQuery版本号转变的章节目录;提升jQuery特性提升和方法的章节目

    大小:194.9 MBjQuery电子书

  • jQuery Mobile从入门到精通

    jQuery Mobile从入门到精通

    《jQuery Mobile从入门到精通》 一书以实例驱动的方式,用近百个实战案例讲述了jQuery Mobile及APP移动开发的相关知识,并通过5个项目案例展现开发流程。全书分为4部分,共19章:第1部分为移动开

    大小:168.7 MBjQuery

  • jQuery实战

    jQuery实战

    jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员,jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了整个jQuery框架,此外

    大小:99.0 MBjQuery电子书

  • 疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战

    疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战

    大小:131.7 MB前端开发电子书

  • Bootstrap与jQuery UI框架设计

    Bootstrap与jQuery UI框架设计

    随着各类移动终端设备的普及 之前针对PC端设计的网站已经无法满足用户的需求 响应式网页设计的概念应运而生。无论用户使用笔记本还是iPad 页面都应该能够自动切换分辨率、图片尺寸及相

    大小:180 MBjQuery电子书

  • PHP与jQuery开发实例

    PHP与jQuery开发实例

    这书由浅入深地叙述了怎么使用PHP与jQuery搭建高宽比互动的Web运用。每一章聚焦点一个主题风格,探讨Web开发者常常必须处理的一类实际难题。书中以实际上范例及编码表述的方法得出了有目

    大小:9.8 MBPHP开发

  • Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践

    Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践

    本书是著名前端开发大牛阮晓龙老师爽作,HTML5、CSS3、jQuery、AJAX一站搞定,一本真正好学、实用又精彩的书,讲述了用HTML5 CSS3设计构建网站的必备知识,欢迎下载

    大小:167.1 MBWeb前端电子书

  • jQuery UI开发指南

    jQuery UI开发指南

    《jQuery UI开发指南》 是jQuery UI的快速开发指南,全面介绍jQuery UI如何改进HTML页面展示,内容包括jQuery UI 1.8版本的下列扩展特性:选项卡管理、折叠菜单、对话框、按钮、进度条、滑块、日历

    大小:6.02 MB前端开发电子书

用户留言