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 相关文章推荐
javascript 自动填写表单的实现方法
Apr 09 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
jQuery选择器源码解读(七):elementMatcher函数
Mar 31 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
js命名空间写法示例
Dec 18 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
CI框架表单验证实例详解
2016/11/21 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
Python简单进程锁代码实例
2015/04/27 Python
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
python中for in的用法详解
2020/04/17 Python
parser.add_argument中的action使用
2020/04/20 Python
Python连接mysql方法及常用参数
2020/09/01 Python
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
初中英语教学反思
2014/01/25 职场文书
安全生产承诺书
2014/03/26 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
考研英语复习计划
2015/01/19 职场文书
化工生产实习心得体会
2016/01/22 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
世界十大狙击步枪排行榜
2022/03/20 杂记
angular4实现带搜索的下拉框
2022/03/25 Javascript