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 相关文章推荐
使用IE的地址栏来辅助调试Web页脚本
Mar 08 Javascript
JQuery 学习笔记 选择器之四
Jul 23 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
基于JavaScript实现省市联动效果
Jun 22 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中include()与require()的区别说明
2010/03/10 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
php实现文件下载代码分享
2014/08/19 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
常用PHP框架功能对照表
2014/10/23 PHP
微信支付的开发流程详解
2016/09/13 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
jQuery 表单验证扩展(四)
2010/10/20 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
Python的类实例属性访问规则探讨
2015/01/30 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
python路径的写法及目录的获取方式
2019/12/26 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
python爬取招聘要求等信息实例
2020/11/20 Python
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
暑期社会实践方案
2014/02/05 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
会议主持词开场白
2015/05/28 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript