<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="jQuery/jquery-2.1.1.js" ></script>
<script>
$(function(){
var arr = [
["东城","西城","崇文","宣武","朝阳","丰台","石景山","海淀","门头沟","房山","通州","顺义","昌平","大兴","平谷","怀柔","密云","延庆" ]
,
["黄浦","卢湾","徐汇","长宁","静安","普陀","闸北","虹口","杨浦","闵行","宝山","嘉定","浦东","金山","松江","青浦","南汇","奉贤","崇明"]
,
["和平","东丽","河东","西青","河西","津南","南开","北辰","河北","武清","红挢","塘沽","汉沽","大港","宁河","静海","宝坻","蓟县" ]
,
["万州","涪陵","渝中","大渡口","江北","沙坪坝","九龙坡","南岸","北碚","万盛","双挢","渝北","巴南","黔江","长寿","綦江","潼南","铜梁","大足","荣昌","壁山","梁平","城口","丰都","垫江","武隆","忠县","开县","云阳","奉节","巫山","巫溪","石柱","秀山","酉阳","彭水","江津","合川","永川"]
];
var nameid=$(".nameid");
var sheng=$("#sheng");
var mm=$(".mmid");
var nl=$(".nlid");
var sex=$("")
var flag1 = false;
var flag2 = false;
var flag3 = false;
var flag4 = false;
nameid.blur(function(){
if(nameid.val()==null||nameid.val()==""){
alert("用户姓名不能为空");
flag1=false;
}else{
flag1=true;
}
});
mm.blur(function(){
if(mm.val().length<4||mm.val().length>16){
alert("密码长度必须在4-16位之间");
flag2=false;
}else{
flag2=true;
}
});
nl.blur(function(){
var nl1=parseInt(nl.val());
if(isNaN(nl1)){
alert("年龄必须为数字");
flag3=false;
}else{
flag3=true;
}
});
// if($("input[name=='sex'").is("checked")){
//
// $("#form").submit();
// }else{
// alert("请选择性别");
// }
sheng.change(function(){
$("#shi option").remove();
var ind=$(this).val();
alert(ind);
for(c in arr[ind]){
var $c2=$("#shi");
var cs=$("<option>"+arr[ind][c]+"</option>");
$c2.append(cs);
}
});
$(".tj").click(function(){
if(flag1 && flag2 && flag3){
var name=$(".nameid").val();
var mm = $(".mmid").val();
var nl = $(".nlid").val();
var $sexV = $("input[name='sex']:checked").val();
var $cityV = $("#sheng option:selected").html();
var $city2V = $("#shi option:selected").html();
var $data = $("#data");
var $a = $("<tr><td><input type='checkbox'></td><td>"+name+"</td><td>"+mm+"</td><td>"+nl+"</td><td>"+$sexV+"</td><td>"+$cityV+"-"+$city2V+"</td></tr>");
$data.append($a);
}else{
alert("请输入正确信息");
}
});
});
</script>
<script>
$(function(){
$("#all").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;
});
}
});
$("#del").click(function(){
$("#data :checked").not("[id]").parent().parent().remove();
});
});
</script>
</head>
<body>
<form>
用户名:<input type="text" class="nameid"/><br />
密 码:<input type="password" class="mmid"/><br />
年 龄:<input type="number" class="nlid"/><br />
性别:<input type="radio" name="sex" checked="checked" value="男"/>男<input type="radio" name="sex" value="女"/>女<br />
住址:省<select id="sheng">
<option value=0>北京</option>
<option value=1>上海</option>
<option value=2>广东</option>
<option value=3>深圳</option>
</select>市<select id="shi">
<option >海淀区</option>
<option >丽江区</option>
<option>莆田区</option>
<option >金水区</option>
</select><br />
</form>
<input type="submit" value="提交" class="tj"/>
<button id="del">批量删除</button>
<table border="1px solid #000" cellpadding="0" cellspacing="0" id="data">
<tr>
<td><input type="checkbox" id="all"></td>
<td>用户名</td>
<td>密码</td>
<td>年龄</td>
<td>性别</td>
<td>住址</td>
</tr>
</table>
</body>
</html>
姓名+年龄+性别+密码+住址判断添加到表格(批量删除)
最新推荐文章于 2020-12-23 23:17:08 发布