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

最新推荐文章于 2021-12-28 19:46:56 发布

Ron韦斯莱

最新推荐文章于 2021-12-28 19:46:56 发布

阅读量718

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_43537987/article/details/89034677

本文通过一个jQuery小案例，介绍了如何实现表格动态添加和删除行的功能。关键点包括：利用on()方法绑定事件，隐藏和显示表单及遮盖层，以及获取输入值来创建新的表格行。同时，文章还探讨了on()方法相对于bind()和delegate()的优势，并给出了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来看一下效果：
在这里插入图片描述
代码部分：
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;
			padding: 0;
		}
		body {

		}
		#wrap {
			width: 400px;
			margin: 100px auto;
		}
		#btnAdd {
			width: 80px;
			height: 30px;
			backgro