`

jquery添加删除表格行

 
阅读更多

jquery向表格添加一行,或者删除一行数据

表格最后一行有一个添加按纽,具体如下

当点击添加按纽的时候,在这个表格的倒数第二行添加一行,因为倒数第一行是添加按钮的位置。代码如下

页面的table代码

<table border="0" cellpadding="2" cellspacing="1" width="100%" class="tablebgW" id="table2">
				 <tr class="content" >
					<td  class="tableCenter" width="25%">参与项目</td>
					<td  class="tableCenter" width="15%">所在行政区划</td>
					<td  class="tableCenter" width="15%">开户银行</td>
					<td  class="tableCenter" width="15%">银行网点</td>
					<td  class="tableCenter" width="15%">银行账号</td>
					<td  class="tableCenter" width="15%">开户户名</td>
					<td  class="tableCenter" width="15%">操作</td>
				</tr>
				<tr class="back5" id="jmcyxm" >
					<td  class="tableCenter" width="25%"> 
							<!-- 补贴项目下拉菜单,需要从数据库里进行读取 到时候写一个htjs:select下拉菜单 -->
							<htjs:select sid="SELECT_ALL_BTXM" value="DM_BTXM" label="MC_BTXM" name="BTXM" associate="" >
							</htjs:select>
					</td>
					<!-- 所在行政区划 -->
					<td  class="tableCenter" width="25%"> 
						<input type="hidden"   name="nmXzqhDm" /> 
						 <input type="text"   name="XMXZQH"   onclick="" size="10" readonly="readonly"/>
						 <a href="javascript:void(0);" onclick=""></a>
						 <img src="/server/hmykt/public/images/images/bi.gif" title="选择" style="cursor: hand">
					</td>
					<!-- 选择银行  -->
					<td class="tableCenter"  width="12.5%"> 
							<select  name="nmYhlbDm" onchange="">
								
									<option  value="01">农业银行</option>
								
									<option  value="02">邮政银行</option>
								
									<option  value="03">农村信用社</option>
								
									<option  value="04">建设银行</option>
								
									<option  value="05">地方商业银行</option>
								
							</select>
					</td>
					<td  class="tableCenter" width="12.5%"> 
						 <input type="text"   name="nmHH_KHYH_SHOW"   size="10"  onclick="" readonly="readonly"/>
						 <a href="" onclick=""></a>
						 <img src="/server/hmykt/public/images/images/bi.gif"  title="选择试验" style="cursor: hand" />
					</td>
					<!-- 银行帐号 -->
					<td class="tableCenter" width="12.5%"> 
						<input type="text"  size="10" name="nmYhzh" value="试验" />
					</td>
					<!-- 开户户名 -->
					<td  class="tableCenter" width="12.5%">
						<input type="text"  size="10" name="nmKhhm"  value="试验二"/> 
					</td>
					<!-- 最后一个td -->
					<td>
					</td>
				</tr>
				 <tr class="back5" id="tianjia">
					<td   class="tableRight" colspan="7"> 
					  <input type="button" class="button1" name="" id="" value="添 加" onclick="appendRow()"/>&nbsp;&nbsp;
					</td>
				</tr>
			</table> 			

 处理添加删除事件的jquery代码

//添加行
function appendRow(){
		var tr = $("#jmcyxm1").clone(true);//克隆一行
		tr.find("td:last").html("<img src='/server/hmykt/public/images/images/del_01.gif' onclick='delRow(this);'title='删除'>"); 
		tr.insertBefore("#table2 tr:last");//把这行加到表格的倒数第二行,表格添加完毕
}
//删除相对应的行
function delRow(rows)
{
	$(rows).parent("td").parent("tr").remove();
}

 删除行的时候要注意,传过来的那个参数,在调用的时候,传一个this参数即可,代表的是本行

分享到:
评论

相关推荐

    jQuery 动态添加或删除表格行

    本文将深入探讨如何使用 jQuery 动态添加和删除表格行,以实现高效且用户友好的数据展示。 首先,理解 HTML 表格的基本结构至关重要。`&lt;table&gt;` 元素用于创建表格,`&lt;tr&gt;` 代表表格行,`&lt;td&gt;` 或 `&lt;th&gt;` 分别表示...

    jquery表格动态添加删除行代码.zip

    本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能,为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能,即在表格中动态地添加和删除行,这对于数据展示和编辑是非常实用的。 首先...

    jquery 添加、删除表格

    删除表格行通常涉及到选择要删除的行,然后使用`.remove()`方法。例如,如果有一个按钮与每行关联,用于删除该行,我们可以这样做: ```javascript $('table tbody').on('click', 'button.delete', function() { $...

    74、jquery表格动态添加删除行代码

    &lt;title&gt;jQuery动态添加删除行 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; 姓名 年龄 操作 张三 &lt;td&gt;25 &lt;td&gt;&lt;button class="delete"&gt;删除&lt;/button&gt;&lt;/td&gt; ...

    jquery表格添加删除行点击按钮动态添加删除行

    通过点击按钮动态添加或删除表格行,可以提高用户的交互体验,使得数据管理更加灵活。 首先,我们需要创建一个基本的HTML结构,包含一个表格和两个按钮,分别用于添加新行和删除选中行。表格通常由`&lt;table&gt;`、`...

    JQuery对表格行的添加删除

    JQuery对表格行的添加删除,如添加一行,删除一行

    jQuery表格编辑添加删除行插件.zip

    《jQuery表格编辑添加删除行插件详解》 在网页开发中,表格是一种常见的数据展示方式,而jQuery作为JavaScript的一个强大库,提供了丰富的功能和便利的操作,使得表格的编辑、添加和删除行变得更加简单。本文将深入...

    jquery动态控制表格的行

    通过创建新的DOM元素、添加事件监听器和应用CSS样式,我们可以轻松地实现动态增加、选中和删除表格行。这对于构建交互式Web应用,尤其是在处理表格数据时,是非常实用的工具。在实际项目中,你可以根据需要进一步...

    jQuery自定义添加删除表格行内容特效.zip

    《jQuery自定义添加删除表格行内容特效》 在网页开发中,jQuery库因其简洁的语法和强大的功能,深受开发者喜爱。本项目“jQuery自定义添加删除表格行内容特效”是基于jQuery实现的一种交互式功能,它允许用户动态地...

    jquery添加表格行

    删除表格行同样简单,可以使用`remove()`方法选择并移除特定的行。例如,删除点击的行: ```javascript $("#myTable").on("click", "tr", function() { $(this).remove(); // 移除被点击的行 }); ``` ### 5. 多行...

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

    总的来说,实现动态添加和删除表格行的基本步骤如下: 1. 选择表格和行:使用jQuery选择器定位到表格和目标行。 2. 创建新行:准备要插入的新行的HTML代码。 3. 插入行:使用`.after()`或`.before()`方法在适当的...

    jquery动态添加 删除指定行元素

    总的来说,动态添加和删除表格行是前端开发中常见的功能,jQuery提供了简洁而强大的API来处理这类任务。通过理解并运用`add()`和`del()`函数,开发者可以轻松地实现这些功能,同时还能根据具体场景进行优化和扩展。

    jquery实现的可增加,删除行,可多行上下移动表格

    5. `data()`:用于存储和检索与元素关联的数据,这可能被用来跟踪表格行的状态或附加信息。 6. `each()`:遍历jQuery对象中的每个元素,这对于批量操作表格中的行非常有用。 在实际代码实现中,开发者可能创建了一...

    jQuery表格编辑添加删除行代码.zip

    《jQuery表格编辑添加删除行代码详解》 在Web开发中,动态交互的表格是一个常见的需求,尤其是在移动设备上。"jQuery表格编辑添加删除行代码"就是针对这一需求提供的一种解决方案,它利用JavaScript库jQuery的强大...

    jQuery 动态添加、删除表格行特效

    本资源主要探讨的是如何使用jQuery实现动态添加和删除表格行的特效,这对于构建交互性强的网页表格非常有用。以下将详细讲解相关知识点。 首先,jQuery提供了方便的DOM操作方法,如`append()`和`remove()`,可以...

    JavaScript动态添加删除表格行

    这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具",我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中,`&lt;table&gt;`元素用于创建...

    jQuery表格添加行数据代码.zip

    在这个"jQuery表格添加行数据代码"中,我们主要关注的是如何利用jQuery来动态地向表格中添加、编辑和删除行数据。这个压缩包包含了一些关键文件,如CSS样式文件、HTML页面、JavaScript脚本以及说明文件。 首先,`...

    jquery添加删除行

    - 创建新行:可以使用`$('&lt;tr&gt;')`创建一个新的表格行元素,然后添加对应的单元格`$('&lt;td&gt;')`。 - 插入行:使用`.append()`方法将新行添加到表格的末尾,或者使用`.prepend()`添加到开头。 - 内容填充:在单元格中...

    使用jQuery实现动态添加、删除表格

    本教程将详细讲解如何使用jQuery来实现动态添加和删除表格行,这在数据展示和用户交互中非常常见,特别是在需要实时更新或编辑数据的场景下。 一、jQuery基础 在开始之前,我们需要确保网页已经引入了jQuery库。...

Global site tag (gtag.js) - Google Analytics