用jQuery实现简单的增删改查操作

最新推荐文章于 2024-07-03 16:33:21 发布

weixin_58983198

最新推荐文章于 2024-07-03 16:33:21 发布

阅读量2k

点赞数 1

分类专栏：增删改查 jQuery 两种方法文章标签： jquery html 前端增强现实

本文链接：https://blog.csdn.net/weixin_58983198/article/details/126669372

版权

下面就用两种方法去用jQuery实现一些简单的增删改操作，包含模态窗：

第一种方法，我自己写的，写的时候用到了事件委托，需要注意的是，input框，他的清空操作所处的位置，代码还是很容易看懂的，运行暂时没发现什么问题，附上图代码吧！

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.add {
			width: 100px;
			height: 30px;
			background-color: #2c551d;
			color: white;
			margin: 15px;
		}

		input {
			width: 200px;
			height: 30px;
			margin: 15px;
		}

		table {
			width: 500px;
			line-height: 30px;
			text-align: center;
			margin: 15px;
		}

		table tr {
			border: none;
		}

		.update,
		.delete {
			padding: 5px;
			margin: 0 8px;
			border: none;
			color: white;
		}

		.update {
			background-color: red;
		}

		.delete {
			background-color: #2c551d;
		}

		.add_list {
			display: none;
		}
	</style>
</head>

<body>

	<button class="add">＋添加记录</button><br>
	<table class="add_list" width="300" height="200">
		<tr>
			<td>id</td>
			<td><input class="ids" type="text" placeholder="请输入id" /></td>
		</tr>
		<tr>
			<td>username</td>
			<td><input class="usernames" type="text" placeholder="请输入用户名" /></td>
		</tr>
		<tr>
			<td>password</td>
			<td><input class="passwords" type="text" placeholder="请输入密码" /></td>
		</tr>
		<tr>
			<td colspan="2">
				<button class="trueadd">确认添加</button>
				<button class="trueupdate">确认修改</button>
			</td>
		</tr>
	</table>

	<input type="text" id="content" placeholder="请输入用户名">
	<button class="search" onclick="search(1)">搜索</button>
	<button class="search" onclick="search(2)">重置</button><br>
	<table class="main" class="list" border="" cellspacing="0" cellpadding="0">
		<tr>
			<th>id</th>
			<th>username</th>
			<th>password</th>
			<th></th>
		</tr>
		<tr class="list_item">
			<td>1</td>
			<td>路飞</td>
			<td>lf</td>
			<td><button class="update">修改</button><button class="delete">删除</button></td>
		</tr>
		<tr class="list_item">
			<td>2</td>
			<td>山治</td>
			<td>sz</td>
			<td><button