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

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

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

今天在项目中,刚好用到给指定的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" onclick="addTr2('tab', -1)" value="添加">
<input type="button" onclick="delTr2()" value="删除">
</body>
</html>

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 一行
, table添加
table删除一行
jquery 动态添加元素、jquery 动态添加div、jquery动态添加表格行、jquery ul动态添加li、jquery 动态添加样式,以便于您获取更多的相关知识。

时间: 2024-10-18 06:23:05

jQuery给指定的table动态添加删除行的操作方法_jquery的相关文章

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

$("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列 $("#mytable tr").find("td:nth-child(3)") 3表示获取每行的第三列 今天在项目中,刚好用到给指定的table添加一行.删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自己动手封装个,现就把代码分享出来,避免大伙重复造轮子,

js实现对table动态添加、删除和更新的方法_javascript技巧

本文实例讲述了js实现对table动态添加.删除和更新的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999

ASP.NET jQuery 实例8 (动态添加内容到DropDownList)_jquery

首先准备好页面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="left"> <fieldset style="width: 350px; height: 150px"> <p> 选择颜色</p> <table cellpadding="0" cellspacing=&qu

Jquery 动态添加按钮实现代码_jquery

点击添加 动态添加两个文本框: 分别表示x和y的值,点击取消 删除本行的2个文本框记得要引入jquery.js 复制代码 代码如下: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(function() { $("#btnMian").click(fun

jQuery实现表格数据的动态添加与统计

某物流信息系统中的功能要求如图1.1所示,表格中每一行代表一笔运送货物的信息,在录入每行的计费重量和费率后,要求能按一定的公式,自动计算运送费用,并且能自动统计所有运送货物的总运费.运送货物信息的数据量(即表格的行数)不定,要求能动态增加.删除,即表格的数据行数是动态可维护的.同时为了方便操作,需要在页面中能像使用键盘的上下左右方向键,在录入的文本框之间进行切换.每行的数据有一定的校验要求,比如单号必须为8位数字,件数和重量必须为数字... 单行货物信息计算运费不难实现,只需要在计费重量和费率的

(论坛答疑点滴)怎么给Table动态添加控件并且得到控件的值?

动态|控件 此例子达到的效果是: 每按一次Button1,在表格Table1中添加一行(行中有2列,一列是文本框,一列是下拉框),并且当按钮第一次按下时再添加一个按钮,点击这个动态添加的按钮,输出表格中所有的控件的值. 前台: <form id="Form1" method="post" runat="server">             <asp:Table id="Table1" runat=&quo

Jquery动态添加输入框的方法_jquery

本文实例讲述了Jquery动态添加输入框的方法.分享给大家供大家参考.具体实现方法如下: <!-- 页头 --> <#include "../common/head.ftl"> <div id="onFailureDiv" class="alert alert-danger navbar-fixed-top" style="text-align:center; display:none">&

基于jQuery实现表格数据的动态添加与统计的代码_jquery

                                                          图(1.1)    某物流信息系统中的功能要求如图1.1所示,表格中每一行代表一笔运送货物的信息,在录入每行的计费重量和费率后,要求能按一定的公式,自动计算运送费用,并且能自动统计所有运送货物的总运费.运送货物信息的数据量(即表格的行数)不定,要求能动态增加.删除,即表格的数据行数是动态可维护的.同时为了方便操作,需要在页面中能像使用键盘的上下左右方向键,在录入的文本框之间进行切换

自己动手制作jquery插件之自动添加删除行功能介绍_jquery

这是一个我认为功能基本完善的插件,它包括添加.删除.插入.上下移动.索引标识. 数量控制等功能,基本上能满足大部分多行添加的需求,当然,在完成这些功能的前提下,我也尽量保持较少的代码量和易理解的逻辑性.      这个插件的演示页面是http://www.lovewebgames.com/demo/autoAdd/autoAdd.html ,引用自己动手制作jquery插件之自动添加删除行(上)里的介绍,这是一个简单的插件,它的作用是:一个系统中有大量的需要对一个行进行复制添加,希望能够进行批量