HTML简单的基本操作功能_html基础操作-CSDN博客

本文链接：https://blog.csdn.net/Zhan_2020/article/details/107663703

这篇博客主要介绍了HTML的基本操作，包括创建元素、设置属性、样式控制以及页面布局等内容，旨在帮助初学者快速掌握网页制作的基础技能。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery1.11.3.min.js"></script>
		<script>
			function add() {
				//获得填入的值
				var realName = $("#realName").val();
				var age = $("#age").val();
				var address = $("#address").val();
				//创建一行
				var trObj = $("<tr><td><input type=\"checkbox\"></td><td>" + realName + "</td><td>" + age + "</td><td>" + address + "</td><td><a href=\"javascript:void(0)\" οnclick=\"del(this)\">删除</a></td></tr>")
				//获得tbody
				$("#mytb").append(trObj);
			}
			//删除一行
			function del(obj) {
				$(obj).parent().parent().remove();
			}
			// 先 全选， 再删除

			function checkAll(obj) {
				var states = $(obj).prop("checked");

				if(states == true) {
					$("tbody input").prop("checked", true);
				} else {
					$("tbody input").prop("checked", false);
				}
			}
			// 删除
			function delBatch() {
				$("tbody input:checked").parent().parent().remove();
			}
		</script>
	</head>
	<body>
		<table>
			<tr>

				<td>姓名：<input id="realName" name="realName" type="text"></td>
				<td>年龄：<input id="age" name="age" type="text"></td>
				<td>地址：<input id="address" name="address" type="text"></td>
				<td><input value="添加" type="button" onclick="add()">
					<input value="批量删除" type="button" onclick="delBatch()">
				</td>
			</tr>
		</table>
		<table border="1">
			<thead>
				<tr>
					<td><input id="checkall" type="checkbox" onchange="checkAll(this)"></td>
					<td>姓名</td>
					<td>年龄</td>
					<td>地址</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody id="mytb">
				<tr>
					<td><input type="checkbox"></td>
					<td>小张</td>
					<td>30</td>
					<td>郑州</td>
					<td>
						<a href="javascript:void(0)" onclick="del(this)">删除</a>
					</td>
				</tr>
			</tbody>

		</table>
	</body>



</html>

在这里插入图片描述