master

分支 (2)

管理

管理

master

dev

my-store
/
添加删除练习.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>练习</title>
	<style type="text/css">
		#myTable {
			width: 900px;
			margin: 0px auto;
			background-color: #008000;
		}

		#myTable td,
		#myTable th {
			background-color: white;
		}

		#myDiv {
			width: 900px;
			margin: 0px auto;
			height: 30px;
			line-height: 30px;
			text-align: center;
		}
		form {

			margin:10px 0  0 40% ;
		}
	</style>
</head>

<body>
	<table cellspacing="1" id="myTable">
		<thead>
			<tr>
				<th width="200">
					<input type="checkbox" id="selAll" onchange="" /><span>全选</span>
					<input type="checkbox" id="selAll1" onchange="" /><span>反选</span>
				</th>
				<th width="200">姓名</th>
				<th width="200">性别</th>
				<th width="200">专业</th>
				<th width="200">爱好</th>
				<th width="200">删除</th>
			</tr>
		</thead>
		<!-- before begin -->
		<tbody>
			<!-- after begin -->
			<tr>
				<td><input type="checkbox" /></td>
				<td>刘备</td>
				<td>男</td>
				<td>软件开发</td>
				<td>抽烟</td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>关羽</td>
				<td>男</td>
				<td>国际贸易</td>
				<td>喝酒</td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>张飞</td>
				<td>男</td>
				<td>园林设计</td>
				<td>烫头发</td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>赵云</td>
				<td>男</td>
				<td>平面设计</td>
				<td>抽烟</td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>黄忠</td>
				<td>男</td>
				<td>影视制作</td>
				<td>玩游戏|唱歌|运动</td>
				<td><a href="#">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>小乔</td>
				<td>女</td>
				<td>高级护理</td>
				<td>唱歌</td>
				<td><a href="#">删除</a></td>
			</tr>
			<!-- before end -->
		</tbody>
		<!-- after end -->
	</table>

	<!-- <button id="add">添加人员</button>
	<button id="remove">删除最后一个</button> -->

	<form action="">
		<div>
			<span>姓名:</span><input type="text" placeholder="姓名">
		</div>
		<div>
			<span>性别:</span>
			<input type="radio" name="gender"><span>男</span>
			<input type="radio" name="gender"><span>女</span>
		</div>
		<div>
			<span>专业:</span>
			<select>
				<option value="">软件开发</option>
				<option value="">国际贸易</option>
				<option value="">园林设计</option>
				<option value="">平面设计</option>
				<option value="">影视制作</option>
				<option value="">高级护理</option>
			</select>
		</div>

		<div>
			<span>爱好:</span>
			<input type="checkbox" name="hobby" value="">唱歌
			<input type="checkbox" name="hobby" value="">跑步
			<input type="checkbox" name="hobby" value="">阅读
			<input type="checkbox" name="hobby" value="">敲代码
		</div>

		<input type="submit"  value="添加人员">
	</form>

	<script>

		var wwq = document.querySelectorAll("div input")
		var wwe =document.querySelectorAll('option')
		console.log(wwe);
		console.log(wwq);
		var wwwe = document.append("tr")
	</script>
</body>

</html>