利用jquery给指定的table动态添加一行、删除一行

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

需求场景

1)、添加一行

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

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

2)、删除一行

支持动态删除一行。

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

1、原始界面如下:

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

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

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

代码如下:

<%@ 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" οnclick="addTr2('tab', -1)" value="添加"><input type="button" οnclick="delTr2()" value="删除"></body>
</html>

<link : http://www.cnblogs.com/linjiqin/p/3148181.html>

 

 

 

 

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/300205.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

求求你把输入法调小一点... | 今日最佳

全世界只有3.14 % 的人关注了青少年数学之旅

LoadRunner Interview Questions

摘自&#xff1a;网络1. What is load testing? Ans. Load testing is to test that if the application works fine with the loads that result from large number of simultaneous users, transactions and to determine weather it can handle peak usage periods.2. Wha…

linux安装卷管理,Linux安装管理ISCSI卷(initiator端)

Internet SCSI(iSCSI)是一种网络协议&#xff0c;使用TCP/IP网络来传输SCSI协议。它是代替FC(Fibre Channel-based&#xff0c;光纤通道&#xff1f;) SAN的很好选Internet SCSI(iSCSI)是一种网络协议&#xff0c;使用TCP/IP网络来传输SCSI协议。它是代替FC(Fibre Channel-base…

SQL server 2000安装时提示我”以前的某个程序安装已在安装计算机上创建挂起的文件操作....”...

在运行窗口输入regedit&#xff0c;打开注册表编辑器&#xff0c;在HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\Session Manager中找到PendingFileRenameOperations&#xff0c;删除该键值&#xff08;这个键值是安装程序暂挂项目&#xff0c;只要找到对应的应用程序清除…

Blazor 事件处理开发指南

翻译自 Waqas Anwar 2021年3月25日的文章 《A Developer’s Guide To Blazor Event Handling》 [1]如果您正在开发交互式 Web 应用程序&#xff0c;根据不同的应用程序事件和用户操作动态更新用户界面是十分常见的做法。这些操作会触发事件&#xff0c;而作为开发人员&#xff…

android 开源组件合集-UI篇(2013-11-07更新)

其实也算不上合集,只是将我经常用到的部分整理一下,如果您有好东西,也可以留言补充 1.actionbar http://actionbarsherlock.com/ https://github.com/JakeWharton/ActionBarSherlock (推荐) 2.下拉刷新pulltorefresh https://github.com/chrisbanes/Android-PullToRefresh 支持…

改变世界的5大常数,学过数学的人,这一辈子都不会忘记!

全世界只有3.14 % 的人关注了青少年数学之旅何谓数学&#xff1f;数学家Eduardo曾这样回答“数学是永恒&#xff0c;是真理&#xff0c;是一切的答案。”回首往昔数学始终伴随我们左右纵横交错的几何、繁琐复杂的运算难以求解的方程、无从下手的猜想......尽管在数学道路上有多…

创维linux进入工厂模式,创维电视怎么进入工厂模式?

满意答案zrwemshwt54推荐于 2019.11.03创维彩电进入与退出工厂模式方法的汇总一&#xff0e; D系列5D01机芯&#xff1a;进入&#xff1a;在遥控器屏显键的正下方&#xff0c;加装一个按键(SERVICE键)&#xff0c;按该键即可进入工厂模式。退出&#xff1a; 按遥控器上的TV/AV键…

收到在微软商店购买的商品

今天收到了在微软商店购买的商品&#xff0c;送货速度真快&#xff0c;20号下的订单&#xff0c;今天就拿到了&#xff0c;这么快就从美国通过UPS快递到国内&#xff0c;现在的物流越来越发达了。我购买的商品是&#xff1a;1、WM USB Powered Speakers(USB扬声器)2、LifeCam V…

[导入]纹理拼接后的Wrap寻址

拼接后的纹理:正常的草地(不进行WRAP寻址):文章来源:http://blog.csdn.net/xoyojank/archive/2008/11/03/3212425.aspx转载于:https://www.cnblogs.com/xoyojank/archive/2008/11/04/1343671.html

自定义EventSource(一)EventCounter

之前的Counters都是系统内置的&#xff0c;我们只需在进程外&#xff0c;或进程内采集&#xff0c;然后交给专门的展示指标工具即可。本篇说一下自定义EventSource&#xff0c;来采集自己业务中&#xff0c;或自己产品中的指标收集方式。自定义EventSource是以EventCounters作为…

看完这些自动化原理图,有一种豁然开朗的感觉

全世界只有3.14 % 的人关注了青少年数学之旅机械动态图有的可以洞察工作原理&#xff0c;有的可以洞察结构&#xff0c;有的可以表达工作过程&#xff0c;不学机械的也能看得懂&#xff01;今天的动态图总有一些你没有见过&#xff0c;相当棒&#xff01;一、机械原理篇球齿机机…

编程之美 set 1 不要被阶乘吓倒

总结 1. 使用加法解决指数问题时, 可用背包问题的变形 2. 题目用到的公式和求解 1~N 中 1 出现的次数的公式类似 题目 1. 给定一个整数 N, 那么 N 的阶乘 N! 末尾有多少个 0 呢 2. 求解 N! 的二进制表示中最低位 1 的位置 思路 1. 第一道题相当于求解 N! 分别是 2^a 和 5 ^b, 第…

apache weblogic ssl linux,apache基于ssl配置weblogic(完结篇)

眼睛基本已经无大碍。今天使用apache连接weblogic&#xff0c;并使用ssl&#xff0c;终于完成&#xff0c;最终选用的方式是前端使用apache来进行ssl处理&#xff0c;weblogic只负责相关的业务处理。在apache一边&#xff0c;载入mod_ssl.so、mod_rewrite.so和mod_wl.so&#x…

×××祥解及其配置示例

转载于:https://blog.51cto.com/yaoyao/21464

动态的管理ASP.NET DataGrid数据列【转载】

在ASP.NET的DataGrid数据显示控件编程中&#xff0c;我们有几种方式可以增加DataGrid columns。其中最常见的方法是在web forms设计器中增加&#xff0c;通过在控件工具箱中拖访DataGrid控件到web设计页面&#xff0c;然后在属性生成器中增加Columns列;还有一种方式就是在HTML视…

MTD/MT/MDD/MD以及LIB/DLL之间的一些联系和问题

这个话题要从哪里说起呢。博主小白一个&#xff0c;最近调试程序时(WIN-MSVC)连一些基本问题都没弄懂&#xff0c;本着遇见问题一定要解决的原则&#xff0c;下面来说下MTD/MT/MDD/MD以及LIB/DLL之间的一些联系和问题&#xff1a;一 动态库DLL 静态库LIBMSVC中工程只有三种类型…

WPF开源项目:AIStudio.Wpf.AClient

介绍Wpf客户端&#xff0c;AIStudio.Wpf.AClient软件架构本框架使用Prism做MVVM&#xff0c;优点咱就不说了&#xff0c;主要了容器注入&#xff0c;消息和DI&#xff0c;比自己写省很多事。网上有很多标准的MVVM的使用方法&#xff0c;但是没有形成一个系统级的框架。本框架从…

有一说一,确实。。 | 今日最佳

全世界只有3.14 % 的人关注了青少年数学之旅来源微博 月刊勇者KuMa君

linux一键启动,Linux一键启动、停止、重启Tomcat sh脚本

使用方式sh service-tomcat.sh {start|stop|restart} {si|cas|fr|all}#使用过程总配置一下即可属性名字#1、COMMANDPREFIX#2、APPS#3、APPS2#4、NAMES############################ 统一启动停止前缀 begin# 统一启动停止前缀 模块名称 tomcat7_si_20080COMMANDPREFIX"to…