jQuery实现数据的增删改

最新推荐文章于 2022-09-02 20:01:56 发布

weixin_34146986

最新推荐文章于 2022-09-02 20:01:56 发布

阅读量165

点赞数

原文链接：https://my.oschina.net/dtz/blog/659033

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>

<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
	<style type="text/css">
		.tb {
			width: 500px;
			border: 1px solid gray;
			border-collapse: collapse;
			font-size: 11pt;
			font-family: "bodoni mt black";
		}
		
		.tb td {
			border: 1px solid gray;
			padding: 5px;
		}
		
		.tb thead td {
			background: blue;
			color: white;
			text-align: center;
		}
		
		.tb tr:hover {
			background: lightcyan;
		}
		
		#menu button {
			width: 120px;
			height: 30px;
			border: 1px;
			background: blue;
			color: white;
			border-radius: 8px;
		}
		
		#menu {
			margin-bottom: 10px;
		}
		
		#menu button:hover {
			background: lightskyblue;
		}
		
		#addDialog {
			width: 300px;
			position: absolute;
			display: none;
			border: 1px solid grey;
			background: white;
		}
		
		#modDialog {
			width: 300px;
			position: absolute;
			display: none;
			border: 1px solid grey;
			background: white;
		}
	</style>
</head>

<body> <div id="menu"> <button>增加学生<tton> <button id="delAll">删除选中的学生<tton> </div> <table class="tb" id="tData"> <thead> <tr> <td> <input type="checkbox" id="chk" /> </td> <td> 编号 </td> <td> 姓名 </td> <td> 性别 </td> <td> 操作 </td> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" name="id" /> </td> <td> S001 </td> <td> 张三 </td> <td> 男 </td> <td class="d"> <a class="del">删除</a> <a class="upd">修改</a> </td> </tr> <tr> <td> <input type="checkbox" name="id" /> </td> <td> S002 </td> <td> 李四 </td> <td> 男 </td> <td class="d"> <a class="del">删除</a> <a class="upd">修改</a> </td> </tr> </tbody> </table>

	<div id="addDialog">
		<div style="border-bottom: 1px solid gainsboro;text-align: right;">
			<span>&times</span>
		</div>
		<table>
			<tr>
				<td>
					编号：
				</td>
				<td>
					<input type="text" name="addId" id="addId" />
				</td>
			</tr>
			<tr>
				<td>
					姓名：
				</td>
				<td>
					<input type="text" name="addNme" id="addName" />
				</td>
			</tr>
			<tr>
				<td>
					性别：
				</td>
				<td>
					<input type="radio" name="sex" checked="checked" id="sex1" value="男" />男
					<input type="radio" name="sex" id="sex2" value="女" />女
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="save">保存<tton>
					<button class="qx">取消<tton>
				</td>
			</tr>
		</table>
	</div>
	<div id="modDialog">
		<div style="border-bottom: 1px solid gainsboro;text-align: right;">
			<span id="ex">&times</span>
		</div>
		<table>
			<tr>
				<td>
					编号：
				</td>
				<td>
					<input type="text" name="addId1" id="addId1" />
				</td>
			</tr>
			<tr>
				<td>
					姓名：
				</td>
				<td>
					<input type="text" name="addName1" id="addName1" />
				</td>
			</tr>
			<tr>
				<td>
					性别：
				</td>
				<td>
					<input type="radio" name="sex1" checked="checked" id="sex11" value="男" />男
					<input type="radio" name="sex1" id="sex21" value="女" />女
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="updsave">保存<tton>
					<button class="qx">取消<tton>
				</td>
			</tr>
		</table>
	</div>
</body>

</h tml>

转载于:https://my.oschina.net/dtz/blog/659033