JS BOM对象实现简单的网页信息管理系统

最新推荐文章于 2022-08-26 19:42:07 发布

颜颜颜颜颜越

最新推荐文章于 2022-08-26 19:42:07 发布

阅读量265

点赞数 1

分类专栏：前端文章标签： html jquery js

本文链接：https://blog.csdn.net/NuanShuTT/article/details/108001734

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

下面是实现效果增删改查功能全部都实现了

和js的bom对象实现代码相比 jequery的代码就简单了很多
在这里插入图片描述

HTML代码

<div>
			记录列表<br><br>
			姓名: <input type="text" id='name' placeholder="姓名" />
			年龄: <input type="text" id='age' placeholder="年龄" />
			<button onclick="testAdd()">添加</button> <br><br>
			姓名: <input type="text" id="name2" placeholder="姓名 " />
			<button onclick="testSelect()">搜索</button><br><br>
			<table style="border: 1px solid black ;width:600px;">
				<thead>
					<tr>
						<td style="width: 15%">ID</td>
						<td style="width: 30%">姓名</td>
						<td style="width: 30%">年龄</td>
						<td style="width: 25%">操作</td>
					</tr>
				</thead>
				<tbody id="tbody">
				</tbody>
			</table>
		</div>

JQuery代码（不要忘记引入）

<script type="text/javascript">
			var vid = 1;
			function testAdd() {
				var name = $("#name").val();
				var age = $("#age").val();
				var temp = "<tr id='tr" + vid + "'>" +
					"<td id = 'tda" + vid + "'>" + vid + "</td>" +
					"<td id = 'tdb" + vid + "'>" + name + "</td>" +
					"<td id = 'tdc" + vid + "'>" + age + "</td>" +
					"<td id = 'tdd" + vid + "'>" +
					"<a href='javascript:testDel(" + vid + ");'>删除</a>&nbsp;&nbsp;<a href='javascript:testUpd(" + vid + ");'>修改</a>" +
					"</td></tr>";
				$("#tbody").append(temp);
				// $("#tbody"). html($("#tbody"). html()+temp);
				vid++;
			}

			function testDel(id) {
				if (confirm("是否要删除？")) {
					$("#tr" + id).remove(); //删除自身和后代节点
					//empty0)/仅都除当前节点的后代节点， 自身保留
				}
			}

			function testUpd(id) {
				$("#tdb" + id).html("<input type='text' id = 'tName" + id + "' value ='" + $("#tdb" + id).text() + "'>");
				$("#tdc" + id).html("<input type='text' id = 'tAge" + id + "' value ='" + $("#tdc" + id).text() + "'>");
				$("#tdd" + id).html("<a href= 'javascript:testSave(" + id + ");'>保存</>");
			}

			function testSave(id) {
				$("#tdb" + id).html($("#tName" + id).val())
				$("#tdc" + id).html($("#tAge" + id).val())
				$("#tdd" + id).html("<a href='javascript:testDel(" + vid + ");'>删除</a>&nbsp;&nbsp;<a href='javascript:testUpd(" +
					vid + ");'>修改</a>")
			}

			function testSelect() {
				$("tr").css("background", '');
				var name = $("#name2").val();
				if (name == '') {
					return;
				}
				$("tr").each(function() {
					if ($(this).find("td[id^='tdb']").text().indexOf(name) > -1) {
						
						$(this).css("background",'red')
					}
				})
			}
		</script>