jQuery小案例之给表格动态添加或删除行

最新推荐文章于 2021-04-10 16:52:38 发布
最新推荐文章于 2021-04-10 16:52:38 发布
阅读量648 收藏 6
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43537987/article/details/89034677
版权
本文通过一个jQuery小案例，介绍了如何实现表格动态添加和删除行的功能。关键点包括：利用on()方法绑定事件，隐藏和显示表单及遮盖层，以及获取输入值来创建新的表格行。同时，文章还探讨了on()方法相对于bind()和delegate()的优势，并给出了具体的代码示例。
摘要由CSDN通过智能技术生成

先来看一下效果：
在这里插入图片描述
代码部分：
html:

<body>
	<div id="mask"></div>
	<div id="wrap">
		<div><input type="button" value="添加数据" id="btnAdd"></div>
		<table>
			<thead>
				<tr><th>课程名称</th><th>所属学院</th><th>已学会</th></tr>
			</thead>
			<tbody id="tbody">
				<tr>
					<td>javascript</td>
					<td>计算机科学与技术学院</td>
					<td><a href="javascript:;" class="get">get</a></td>
				</tr>
				<tr>
					<td>javascript</td>
					<td>计算机科学与技术学院</td>
					<td><a href="javascript:;" class="get">get</a></td>
				</tr>
				<tr>
					<td>javascript</td>
					<td>计算机科学与技术学院</td>
					<td><a href="javascript:;" class="get">get</a></td>
				</tr>
			</tbody>	
		</table>
	</div>
	<div id="formAdd">
		<div class="top">
			<span>添加数据</span>
			<input type="button" id="close" value="x">
		</div>


		<div class="form-item">
			<!-- for属性表示与哪个表单元素绑定 -->
	        <label class="lb" for="lessonName">课程名称：</label>
	        <input class="txt" type="text" id="lessonName" placeholder="请输入课程名称">
	    </div>
	    <div class="form-item">
	        <label class="lb" for="school">所属学院：</label>
	        <input class="txt" type="text" id="school" placeholder="请输入学院名称">
	    </div>
	    <div class="form-submit">
	        <input type="button" value="添加" id="formbtnAdd">
	    </div>
	</div>
</body>

css

<style>
		* {
			margin: 0;
最低0.47元/天 解锁文章
Ron韦斯莱
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现动态添加删除表格的行
weixin_48747169的博客
03-26 2398
index.jsp <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <!DOCTYPE html> <html> <head> <title>Title</title> <style type="text/css"> #tab{ width: 500px;
jQuery动态增加一行元素和删除一行元素
祈澈菇凉
09-08 1685
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></scri...
关于用jquery 动态增加、删除表格的行，列操作。
热门推荐
whax
07-05 1万+
jquery 动态增加、删除表格的行，列操作。
jQuery - 动态添加、删除form表单项（附：新增项数据无法提交问题解决）
技术资料收集站
12-07 6649
一、在 Form 表单中动态新增、删除项目 在 Web 开发中，使用 form 表单提交数据大家一定不会陌生。但有时表单项数量并不是固定的，比如我们要提交一个人员信息列表，人员数量不定，填写完毕后一次性提交。这就要求表单可以动态地增加或删除输入项。 1，效果图 （1）页面初始化后默认有两个表单项（两个输入框）。 （2）点击“新增一项”按钮，则在末尾添加一个新的输入条
form表单中动态添加、删除一行明细的JQuery通用方法
weixin_34242509的博客
04-23 675
2019独角兽企业重金招聘Python工程师标准>>> ...
jQuery实现的简单动态添加、删除表格功能示例
10-19
主要介绍了jQuery实现的简单动态添加、删除表格功能,涉及jQuery事件响应及表格元素动态操作相关实现技巧,需要的朋友可以参考下
JS/jQuery实现超简单的Table表格添加,删除行功能示例
10-16
在网页开发中，数据展示经常使用到表格（Table）元素，而动态地添加或删除表格行是常见的交互功能。本文将详细介绍如何使用JavaScript和jQuery来实现这个功能。 首先，我们来看一个基本的HTML结构，包含一个表格...
jquery案例，为表格动态添加行
10-21
本案例主要探讨如何利用jQuery为HTML表格动态添加行并实现删除功能，这对于构建交互性强的数据展示页面至关重要。 首先，我们需要理解HTML表格的基本结构。一个简单的表格由`<table>`元素开始，内部包含`<tr>`...
jquery实现的可增加，删除行，可多行上下移动表格
07-27
这个功能允许用户在表格中动态添加、删除行，以及上下移动表格中的行，提供了更灵活的数据操作体验。在网页开发中，这种功能常见于数据管理界面，便于用户对数据进行排序和编辑。 首先，我们需要理解jQuery库的基本...
Ajax动态表格，可适时添加行、删除行、复制行
03-21
本话题将深入探讨如何实现一个动态表格，用户可以适时添加、删除和复制表格中的行。 首先，我们需要理解Ajax的工作原理。它通过JavaScript发送异步HTTP请求到服务器，获取或提交数据，然后使用JavaScript处理这些...
jQuery动态添加与删除表格行【append方法与on方法与eq方法】
mizuhokaga的博客
02-20 1536
基于jquery版本:jquery-1.10.1.js 去实现表格的 动态添加和动态删除(看js代码直接点下面链接) 需求: 将表单的值提交至表格,并且可以删除 html代码很简单: <body> <h1>添加用户</h1> <div id="box"> name:<input type="text" id="user"/> ...
jquery综合练习--模态对话框传值,删除,新增表格行
weixin_30867015的博客
02-18 140
效果示例: 个人的练习代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jq...
jquery 操作表格（动态添加一行数据，删除某行，获取某行）
Half of if的博客
03-26 1290
1添加表格 var $tr="<tr >"; var biaodan=idName+"-biaodan"; //获取div内所有input（类型为text）的值 $("#"+biaodan+" input[type=text]").each(function () { console.log(this.value); ...
jquery操作表格(添加/删除行、添加/删除列)
十年回首，一纸感动!
11-18 823
利用jquery给指定的table添加一行、删除一行 &lt;script language="javascript" src="./jquery.js"&gt;&lt;/script&gt; &lt;table border="1px #ooo" id="test" name="test" class="test" cellpa
jquery制作动态添加表单行与删除表单行
冯春丽的专栏
01-19 223
<script type="text/javascript" src="js/jquery1.7.js"></script> <script type="text/javascript"> $(function () { var show_count = 20; //要显示的条数 var count = 1; //递增的开始值，这里是...
JQuery动态操作表格(添加、删除、多选、全选删除行操作)
wangxiaohigh
10-18 539
JQery动态操作表格，能够实现 添加行，多选、全选行、删除行操作，这是一个很有参考价值的JQuery适时控制表格的一个功能，含有丰富的注释，方便大家研究学习。 &lt;%@ page language="java" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E...
jquery无刷新添加和删除input输入框 增加减少input框
_修铁路的、的博客
05-31 3319
一、页面代码 添加更多的input输入框 × 二、脚本 $(document).ready(function() { var MaxInputs = 8; //maximum input boxes allowed var InputsWrapper = $("#InputsWrapper")
jquery 基本讲解和表格添加数据替换表格以及清空
yedaiyang的博客
12-04 1070
我们来了解下jqery jQuery 是一个 JavaScript 库。 JavaScript query 本质上是一个外部的js 如果某个页面逻辑太多，如果js全部写在一个页面， 原则：高内聚，低耦合。 类库--->一般是将基础的一些东西进行了封装，简化了一些东西。 jQuery 极大地简化了 JavaScript 编程。 类库：一般就是将一个或者某些功能进行封装。 好处是，方便
使用Jquery实现将输入数据添加至表格中，通过点击Delete可删除所在行数据。
MonsterAji的博客
04-10 339
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 使用Jquery实现将输入数据添加至表格中，通过点击Delete可删除所在行数据。一、运行截图二、代码 一、运行截图 二、代码 Document 添加新员工 name: email: salary: </table>
jquery动态表格，动态添加表格行
最新发布
05-26
可以通过以下步骤来动态添加表格行： 1. 给表格添加一个 id 或 class，方便后续的操作。 2. 使用 jQuery 的 append() 方法在表格末尾添加一行新的 tr 元素。 3. 使用 jQuery 的 html() 方法或 text() 方法来设置新行中的单元格内容。 例如，以下代码演示了如何在表格中添加一行新的数据： ```html <table id="myTable"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>18</td> <td>男</td> </tr> <tr> <td>李四</td> <td>20</td> <td>女</td> </tr> </tbody> </table> <button id="addRowBtn">添加一行数据</button> <script> $(function() { $("#addRowBtn").click(function() { var newRow = $("<tr></tr>"); newRow.append("<td>王五</td>"); newRow.append("<td>22</td>"); newRow.append("<td>男</td>"); $("#myTable tbody").append(newRow); }); }); </script> ``` 通过点击按钮，就可以在表格末尾添加一行新的数据。你可以根据自己的需求修改代码，比如可以根据用户输入的数据动态生成表格行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值