在JS中用DOM动态的修改网页

1.初始网页效果如图

2.点击全选按钮，选定所有表格

3.点击取消按钮取消全选

3.点击删除按钮，删除所选行

4.输入信息，点击增加按钮，将在学生信息表中增加一行数据

效果图：

HTML文件：

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script>
	     $(function(){
			 $("#selectBtn").click(function(){//全选
				 $("input[name=select]").prop("checked",true)
			 });
			 $("#selectCancle").click(function(){//取消选择
				 $("input[name=select]").prop("checked",false)
			 });
			 $("#delBtn").click(function(){//删除所选项
				 $("input[name=select]").each(function(index,element){
					 if($(this).prop("checked"))//如果当前元素被选中
					if(window.confirm("您确定要删除数据吗?"))
					    {
								$(this).parent().parent().remove();//删除当前元素的父元素的父元素的所有子元素，即<tr>的所有子元素
						}
				 });
			 })
			 $("#addBtn").click(function () {//添加
			         var name = $("#username").val();
			         var sex =$('input:radio:checked').val();
					 var grade=$("#grade").val();
			         var number = $("#number").val();
			         var tr = "<tr><td>" + name + "</td><td>" + sex + "</td><td>" + grade + "</td><td>" + number + "</td><td>" + '<input name="select" type="checkbox" value="select">' + "</td></tr>";
			         $("#table").append(tr);
			       });
		 })；
	</script>

JS文件：

<body>
		<center>
		<div id="box">
			<table width="400" border="1" id="table">
				<caption>学生信息表</caption>
				<tr>
					<td>姓名</td>
					<td>性别</td>
					<td>班级</td>
					<td>学号</td>
					<td>状态</td>
				</tr>
				<tr>
					<td>王红</td>
					<td>女</td>
					<td>4</td>
					<td>20211001</td>
					<td><input name="select" type="checkbox" value="select"></td>
				</tr>
				<tr>
					<td>张三</td>
					<td>男</td>
					<td>1</td>
					<td>20211002</td>
					<td><input name="select" type="checkbox" value="select"></td>
				</tr>
			</table>
			<button id="selectBtn">全选</button>
			<button id="selectCancle">取消</button>
			<button id="delBtn">删除</button>
			<button id="addBtn">增加</button><br>
			用户名：<input id="username" type="text" /><br>
			性别：<input id="sex" type="radio" name="性别"  value="男" />男<!--一组单选按钮的name属性必须相同-->
			     <input  id="sex" type="radio" name="性别" value="女" />女<br>
		    班级：<input id="grade" type="text" /><br>
			学号：<input id="number" type="text" />
		</div>
		</center>
	</body>

在JS中用DOM动态的修改网页

猜你喜欢