Jquery增删改查_jq对元素的增删改查语法-CSDN博客

本文链接：https://blog.csdn.net/dongbowen_/article/details/78769042

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>第二周模拟考试</title>
	<script src="../../../代码/4.jQuery/jQuery-2.1.0/jquery-2.1.0.js"></script>
	<style>
	.odd{
	background-color:blue;
	}
	.even{
	background-color:red;
	}
	</style>
	<script>
	$(function(){
	//按钮点击事件
	$("#sub").click(function(){
	var flag1 = flag2 = flag3 = flag4 = false;

	//用户名非空
	var name = $("#name").val();
	if(name == null \|\| name == ""){
	//alert("用户名不能为空");
	$("span").text("用户名不能为空");
	flag1 = false;
	}else{
	$("span").text();
	flag1 = true;
	}

	//密码长度验证
	var pwd = $("#pwd").val();
	var size = pwd.length;
	if(size < 4 \|\| size >16){
	alert("密码长度不正确");
	flag2 = false;
	}else{
	flag2 = true;
	}

	//年龄必须是数字（先验证非空）
	var age = $("#age").val();
	if(isNaN(age)){
	alert("年龄必须是数字");
	flag3 = false;
	}else{
	flag3 = true;
	}

	//验证性别必选
	var sex = $("[name='sex']:checked");
	var sex2 = sex.val();
	var sexChecked = sex.size();
	if(sexChecked != 1){
	alert("性别必选");
	flag4 = false;
	}else{
	flag4 = true;
	}


	//提交成功追加数据
	var privince = $("#privince").val();
	var city = $("#city").val();

	if(flag1 && flag2 && flag3 && flag4){
	alert("成立");
	//创建单元格
	var tCheckbox = $("<th><input class='check' type='checkbox' /></th>");
	var tName = $("<td>"+name+"</td>");
	var tPwd = $("<td>"+pwd+"</td>");
	var tAge = $("<td>"+age+"</td>");
	var tSex = $("<td>"+sex2+"</td>");
	var tCity = $("<td>"+privince+"-"+city+"</td>");
	var tCtrl = $("<td></td>");
	var tDel = $("<button class='del'>删除</button>");
	tCtrl.append(tDel);

	//给按钮添加点击事件
	tDel.click(function(){
	//判断当前行有没有被选中
	var result = $(this).parent().parent().children().eq(0).children();
	if(result[0].checked){
	//被选中了，删除即可
	$(this).parent().parent().remove();

	$("tbody:eq(1) tr").removeAttr("class");
	$("tbody:eq(1) tr:odd").addClass("odd");
	$("tbody:eq(1) tr:even").addClass("even");
	}else{
	alert("请选择");
	}

	});


	//创建tr
	var tr = $("<tr>");
	//向tr中追加td
	tr.append(tCheckbox).append(tName).append(tPwd).append(tAge).append(tSex).append(tCity).append(tCtrl);
	//把tr放到tbody中
	$("tbody:eq(1)").append(tr);

	$("tbody:eq(1) tr").removeAttr("class");
	$("tbody:eq(1) tr:odd").addClass("odd");
	$("tbody:eq(1) tr:even").addClass("even");
	}else{
	alert("asf");
	}


	});

	//二级联动
	$("#privince").change(function(){
	var privince = $(this).val();
	if(privince == "北京"){
	//选中北京怎么更改城市下拉菜单中的内容
	var city = $("<option selected='selected'>海淀区</option><option>昌平区</option><option>朝阳区</option><option>大兴区</option>");
	$("#city").html(city);

	}
	if(privince == "河北"){
	var city = $("<option >石家庄</option><option>唐山</option><option>保定</option><option selected='selected'>邢台</option>");
	$("#city").html(city);
	}
	if(privince == "山西"){
	var city = $("<option selected='selected'>运城</option><option>太原</option><option>临汾</option><option>大同</option>");
	$("#city").html(city);
	}
	});


	//全选
	var a = 0;
	$("#first").click(function(){
	//var result = alert($(this).attr("checked"));
	//a = 1;
	if(a == 0){
	//alert();
	$(":checkbox").prop("checked","checked");
	a = 1;
	}else{
	//alert("asdf");
	$(":checkbox").prop("checked",false);
	a = 0;
	}
	});

	//批量删除
	$("#deleteAll").click(function(){
	var size = $("#delBody :checked").length;
	if(size<=0){
	alert("请先选择");
	}else{
	if(window.confirm("确定要删除吗？")){
	$("#delBody :checked").parent().parent().remove();
	}
	}
	});




	});
	</script>

	</head>

	<body>
	<center>
	<h3>用户注册</h3>
	<table border="1px solid blue" cellpadding="10" cellspacing="0">
	<form action="*">
	<tbody>
	<tr>
	<th>用户名</th>
	<td><input id="name" type="text" placeholder="用户名不能为空" /><span></span></td>

	</tr>
	<tr>
	<th>密　码</th>
	<td><input id="pwd" type="text" placeholder="长度在4-16位之间" /></td>
	</tr>
	<tr>
	<th>年　龄</th>
	<td><input id="age" type="text" placeholder="年龄必须是数字" /></td>
	</tr>
	<tr>
	<th>性　别</th>
	<td><input name="sex" value="男" type="radio" />男<input value="女" name="sex" type="radio" />女</td>
	</tr>
	<tr>
	<th>住　址</th>
	<td>
	省<select id="privince">
	<option>北京</option>
	<option>河北</option>
	<option>山西</option>
	</select>
	市<select id="city">
	<option>海淀区</option>
	<option selected="selected">昌平区</option>
	<option>朝阳区</option>
	<option>大兴区</option>
	</select>
	</td>
	</tr>
	<tr>
	<th colspan="2"><input id="sub" type="submit" value="提交" /></th>
	</tr>
	</form>
	</tbody>
	</table><br />
	<button id="deleteAll">批量删除</button><br /><br />
	<table border="1px solid blue" cellpadding="10" cellspacing="0">
	<thead>
	<tr>
	<th><input id="first" type="checkbox" /> </th>
	<th>用户名</th>
	<th>密　码</th>
	<th>年　龄</th>
	<th>性　别</th>
	<th>住　址</th>
	<th>操　作</th>
	</tr>
	</thead>
	<tbody id="delBody">

	</tbody>
	</table>

	</center>
	</body>
	</html>