jQuery给指定的table动态添加删除行的操作方法


Posted in Javascript onOctober 12, 2016

最近写程序,碰巧有动态增加删除行的,下面就记录一下。

$("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列
$("#mytable tr").find("td:nth-child(3)") 3表示获取每行的第三列

今天在项目中,刚好用到给指定的table添加一行、删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自己动手封装个,现就把代码分享出来,避免大伙重复造轮子,如有问题欢迎大伙拍砖指正,千万可别人身攻击,嘎嘎。。。

需求场景

1)、添加一行

支持在任意行添加一行且可配置的,如可在第一行添加一行、第二行添加一行、倒数第一行添加一行、倒数第二行添加一行,随需求的变化都不会影响。

前提条件:行数需在表中存在否则添加不成功。

2)、删除一行

支持动态删除一行。

先演示结果,如中意了在好好研究代码。

1、原始界面如下:

jQuery给指定的table动态添加删除行的操作方法

2、添加一行,如要添加一行需点击“添加”按钮,现点击两下会自动添加两行,效果如下截图:

jQuery给指定的table动态添加删除行的操作方法

3、删除一行,如要删除指定行,先要选中行然后在点击“删除”按钮进行删除(这不是废话嘛~~~),现选中一行,效果如下截图:

jQuery给指定的table动态添加删除行的操作方法

4、对选中行进行删除,现点击“删除”按钮就会把选中的行删除掉,效果如下截图:

jQuery给指定的table动态添加删除行的操作方法

代码如下:

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>利用jquery给指定的table添加一行、删除一行</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/jquery-1.5.1.js"></script>
<script type="text/javascript">
////////添加一行、删除一行封装方法///////
/**
* 为table指定行添加一行
*
* tab 表id
* row 行数,如:0->第一行 1->第二行 -2->倒数第二行 -1->最后一行
* trHtml 添加行的html代码
*
*/
function addTr(tab, row, trHtml){
//获取table最后一行 $("#tab tr:last")
//获取table第一行 $("#tab tr").eq(0)
//获取table倒数第二行 $("#tab tr").eq(-2)
var $tr=$("#"+tab+" tr").eq(row);
if($tr.size()==0){
alert("指定的table id或行数不存在!");
return;
}
$tr.after(trHtml);
}
function delTr(ckb){
//获取选中的复选框,然后循环遍历删除
var ckbs=$("input[name="+ckb+"]:checked");
if(ckbs.size()==0){
alert("要删除指定行,需选中要删除的行!");
return;
}
ckbs.each(function(){
$(this).parent().parent().remove();
});
}
/**
* 全选
* 
* allCkb 全选复选框的id
* items 复选框的name
*/
function allCheck(allCkb, items){
$("#"+allCkb).click(function(){
$('[name='+items+']:checkbox').attr("checked", this.checked );
});
}
////////添加一行、删除一行测试方法///////
$(function(){
//全选
allCheck("allCkb", "ckb");
});
function addTr2(tab, row){
var trHtml="<tr align='center'><td width='30%'><input type='checkbox' name='ckb'/></td><td width='30%'>地理</td><td width='30%'>60</td></tr>";
addTr(tab, row, trHtml);
}
function delTr2(){
delTr('ckb');
}
</script>
</head>
<body>
<table border="1px #ooo" id="tab" cellpadding="0"
cellspacing="0" width="30%">
<tr align="center">
<td width="30%"><input id="allCkb" type="checkbox"/></td>
<td width="30%">科目</td>
<td width="30%">成绩</td>
</tr>
<tr align="center">
<td width="30%"></td>
<td width="30%">语文</td>
<td width="30%">80</td> 
</tr>
</table>
<input type="button" onclick="addTr2('tab', -1)" value="添加">
<input type="button" onclick="delTr2()" value="删除">
</body>
</html>

以上所述是小编给大家介绍的jQuery给指定的table动态添加删除行的操作方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript valueOf 使用方法
Dec 28 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
javascript每日必学之多态
Feb 23 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 Javascript
详解Javascript中的原型OOP
Oct 12 #Javascript
浅析BootStrap Treeview的简单使用
Oct 12 #Javascript
jquery自定义表单验证插件
Oct 12 #Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 #Javascript
老生常谈javascript的类型转换
Oct 12 #Javascript
vue制作加载更多功能的正确打开方式
Oct 12 #Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 #Javascript
You might like
用在PHP里的JS打印函数
2006/10/09 PHP
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
Yii框架安装简明教程
2020/05/15 PHP
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
在Django的模板中使用认证数据的方法
2015/07/23 Python
Python数据操作方法封装类实例
2017/06/23 Python
Python的语言类型(详解)
2017/06/24 Python
pandas 将索引值相加的方法
2018/11/15 Python
python写程序统计词频的方法
2019/07/29 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
北承题目(C++)
2012/05/16 面试题
地理科学专业毕业生求职信
2013/10/15 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
诚实守信主题班会
2015/08/13 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
作文之亲情600字
2019/09/23 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
python程序的组织结构详解
2021/12/06 Python
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server