<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jQuery-2.1.0/jquery-2.1.0.js"></script>
<script>
//全选全不选另一种简单方法 一行
//判断是否全选
// $("#checkAll").click(function() {
// $('input[name="subBox"]').prop("checked",this.checked); });
// 创建一个二维数组
var arr = new Array(2);
arr[0] = ["广东","广州","深圳","佛山"];
arr[1] = ["湖北","荆州","武汉","赤壁"];
function choose(val){
// 获取city的select
var city = document.getElementById("city");
// 获取option
var cityOp = city.getElementsByTagName("option");
// 设置可操作
city.disabled = false;
// 先删除,后添加
for (var i = 0; i < cityOp.length; i++) {
var op = cityOp[i];
// 删除option
city.removeChild(op);
//数组长度发生变化,需处理
i--;
}
// 遍历
for (var i = 0; i < arr.length; i++) {
//取一维数组
var arr1 = arr[i];
//取一维数组的第一个值
var firstVal = arr1[0];
//判断
if(firstVal == val){
//遍历
for (var j = 1; j < arr1.length; j++) {
// 获取城市名
var value = arr1[j];
// 创建option
var optionl = document.createElement("option");
// 创建文本
var textl = document.createTextNode(value);
// 把文本添加到标签
optionl.appendChild(textl);
//添加到city里面
city.appendChild(optionl);
}
}
}
}
function get(){
var xb = $('[name="aa"]:checked').size();
if(xb!=1){
alert("请选择性别");
}
var oo = $('[name="aa"]:checked').val();
alert(oo);
}
function tian(){
var name = $('.name').val();
var pass = $('.pass').val();
var age = $('.age').val();
var oo = $('[name="aa"]:checked').val();
//获取省市的值
var $cityV = $("#province option:selected").html();
var $city2V = $("#city option:selected").html();
// var tr = $("<tr><td>"+大姐夫呢+"</td><td>"+大姐夫呢+"</td><td>"+123+"</td><td>"+45+"</td><td>"+男+"</td><td>"+地址+"</td></tr>");
var tr = $("<tr><td><input class='cx' type='checkbox'/></td><td>"+name+"</td><td>"+pass+"</td><td>"+age+"</td><td>"+oo+"</td><td>"+$cityV+$city2V+"</td></tr>");
alert(tr);
$(".er").append(tr);
}
$(document).ready(function(e) {
$('#qx').click(function(){
var fl = $(this).prop("checked");
if(fl){
//全选
var $ch = $(":checkbox");
$ch.each(function(index, element) {
$ch[index].checked=true;
});
}else{
//全不选
var $ch = $(":checkbox");
$ch.each(function(index, element) {
$ch[index].checked=false;
});
}
});
$('#dele').on('click', function(){
$(".er :checked").not("[id]").parent().parent().remove(); //移除所有被选中的input元素
});
$('.tj').click(function(){
//get();
if(flag1 && flag2 && flag3){
tian();
}else{
alert("请按要求输入信息");
}
});
var flag1 = false;
var flag2 = false;
var flag3 = false;
var name = $('.name').val();
var pass = $('.pass').val();
var age = $('.age').val();
var sname = $('.sname');
var spass = $('.spass');
var sage = $('.sage');
var ssex = $('.ssex');
$('.name').blur(function(){
var name = $('.name').val();
if(name.length<=0){
sname.html("用户不能为空");
flag1=false;
}else{
sname.html("");
flag1=true;
}
});
$('.pass').blur(function(){
var pass = $('.pass').val();
if(pass.length<4 || pass.length>16){
spass.html("密码为4-6位");
flag2=false;
}else{
spass.html("");
flag2=true;
}
});
$('.age').blur(function(){
var age = $('.age').val();
if(isNaN(age)){
spass.html("年龄必须为数字");
flag3=false;
}else{
spass.html("");
flag3=true;
}
});
});
</script>
</head>
<body>
<center>
<h3>用户注册</h3>
<table width="240" border="1" cellspacing="1">
<tbody>
<tr>
<td>用户名:</td>
<td><input class="name" type="text" placeholder="用户名不能为空"/></td>
</tr><span class="sname"></span>
<tr>
<td>密码:</td>
<td><input class="pass" type="text" placeholder="长度在4-16位之间空"/></td>
</tr><span class="spass"></span>
<tr>
<td>年龄:</td>
<td><input class="age" type="text" placeholder="年龄必须是数字"/></td>
</tr><span class="sage"></span>
<tr>
<td>性别:</td>
<td><input class="sex" type="radio" name="aa" value="男" />男<input type="radio" name="aa" value="女" />女</td>
</tr><span class="ssex"></span>
<tr>
<td>住址:</td>
<td>
<select id="province" onchange="choose(this.value)">
<option value="0">--请选择省--</option>
<option value="广东">广东</option>
<option value="湖北">湖北</option>
</select>
<select id="city" disabled="disabled">
<option value="0">--请选择市--</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center"><button class="tj">提交</button></td>
</tr>
</tbody>
</table>
<br/><br/>
<button id="dele">批量删除</button>
<table width="240" border="1" cellspacing="1">
<tbody class="er">
<tr>
<td><input id="qx" type="checkbox"/></td>
<td>用户名</td>
<td>密码</td>
<td>年龄</td>
<td>性别</td>
<td>住址</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
添加数据+二级联动+全选删除
最新推荐文章于 2022-11-27 15:51:32 发布