表单验证+二级联动+添加+全选/反选+删除
2017-12-10 20:47
302 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.botn {
width: 80px;
height: 30px;
background-color: greenyellow;
border: 1px solid black;
border-radius:5px ;
}
td{
border: 1px solid black;
}
span {
color: red;
}
.quan{
margin-top: 20px;
margin-left: 450px;
height: 25px;
background-color:yellow;
border: 1px solid black;
border-radius:5px ;
}
.pi{
margin-top: 20px;
height: 25px;
background-color:red;
border: 1px solid black;
border-radius:5px ;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
function btn(){
var flag1 = false;
var name = $("#name").val();
if(name.length < 3 || name.length > 30) {
$("#sname").html("用户名不小于3个字符且不大于30个字符")
flag1 = false;
} else {
$("#sname").html("")
flag1 = true;
}
var flag2 = false;
var birth = $("#birth").val();
if(birth.length == 0) {
$("#sbirth").html("生日不能为空")
flag2 = false;
} else {
$("#sbirth").html("")
flag2 = true;
}
if(flag1 && flag2) {
var name = $("#name").val();
var sex = $("#sex").val();
var birth=$("#birth").val();
var province=$("#province").find("option:selected").text();
var city=$("#city").find("option:selected").text();
var tr=$("<tr></tr>")
var td=$("<td> <input type='checkbox' name='ck'/></td>")
var td1=$("<td></td>").html(name);
var td2=$("<td></td>").html(sex);
var td3=$("<td></td>").html(birth);
var td4=$("<td></td>").html(province+"-"+city);
var td6=$("<td><button>删除</button></td>");
tr.append(td);
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
tr.append(td6);
$("table").append(tr);
$("table tr:odd").css("background","#999999");
$("table tr:even").css("background","#eeeeee");
$("button").unbind("click");
$("button").click(function(){
var shanchu=window.confirm("是否删除"+name);
if(shanchu){
$(this).parent().parent().remove();
var success=window.confirm("删除成功");
$("table tr:odd").css("background","#999999");
$("table tr:even").css("background","#eeeeee");
}else{
return false;
}
});
}
}
//城市二级联动
var citys = new Array(); //一个二维数组，用于存储省市，依次对应
citys[1] = new Array("西二旗", "海淀");
citys[2] = new Array("中牟", "新区");
citys[3] = new Array("固安", "衡水");
function change(value) {
document.getElementById("city").options.length = 0;
for(
var m = 0; m < citys[value].length; m++) {
var o = document.createElement("option");
var node = document.createTextNode(citys[value][m] + "");
o.appendChild(node);
document.getElementById("city").appendChild(o);
}
}
</script>
<script>
function ckAll(){
var cks=document.getElementsByName("ck");
for(var i=0;i<cks.length;i++){
cks[i].checked=!cks[i].checked;
}
4000
}
function delAll(){
var len=$("input[name='ck']:checked");
if(len.length==0){
alert("请选择要删除的数据");
}else{
$(len).parent().parent().remove();
}
}
</script>
</head>
<body>
<form>
姓名：<input type="text" id="name" /><span id="sname"></span>
性别：<select id="sex">
<option checked="checked">男</option>
<option>女</option>
</select>
生日：<input type="text" id="birth" /><span id="sbirth"></span>
住址：<select class="se1" id="province" onchange="change(this.value)">
<option value="1" checked="checked">北京</option>
<option value="2">郑州</option>
<option value="3">河北</option>
</select>
<select class="se2" id="city">
<option value="0" checked="checked">西二旗</option>
</select>
<input class="botn" type="button" onclick="btn()" value="添加" /><br />
<input class="quan" type="button" onclick="ckAll()" value="全选/反选" />
<input class="pi" type="button" onclick="delAll()" value="批量删除" />
</form>
<table style="width: 600px;border:1px solid black;margin-top: 15px;" cellspacing="0px" cellpadding="5px">
<tr style="background-color: #999999">
<td><input type="checkbox" /></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>删除</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.botn {
width: 80px;
height: 30px;
background-color: greenyellow;
border: 1px solid black;
border-radius:5px ;
}
td{
border: 1px solid black;
}
span {
color: red;
}
.quan{
margin-top: 20px;
margin-left: 450px;
height: 25px;
background-color:yellow;
border: 1px solid black;
border-radius:5px ;
}
.pi{
margin-top: 20px;
height: 25px;
background-color:red;
border: 1px solid black;
border-radius:5px ;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
function btn(){
var flag1 = false;
var name = $("#name").val();
if(name.length < 3 || name.length > 30) {
$("#sname").html("用户名不小于3个字符且不大于30个字符")
flag1 = false;
} else {
$("#sname").html("")
flag1 = true;
}
var flag2 = false;
var birth = $("#birth").val();
if(birth.length == 0) {
$("#sbirth").html("生日不能为空")
flag2 = false;
} else {
$("#sbirth").html("")
flag2 = true;
}
if(flag1 && flag2) {
var name = $("#name").val();
var sex = $("#sex").val();
var birth=$("#birth").val();
var province=$("#province").find("option:selected").text();
var city=$("#city").find("option:selected").text();
var tr=$("<tr></tr>")
var td=$("<td> <input type='checkbox' name='ck'/></td>")
var td1=$("<td></td>").html(name);
var td2=$("<td></td>").html(sex);
var td3=$("<td></td>").html(birth);
var td4=$("<td></td>").html(province+"-"+city);
var td6=$("<td><button>删除</button></td>");
tr.append(td);
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
tr.append(td6);
$("table").append(tr);
$("table tr:odd").css("background","#999999");
$("table tr:even").css("background","#eeeeee");
$("button").unbind("click");
$("button").click(function(){
var shanchu=window.confirm("是否删除"+name);
if(shanchu){
$(this).parent().parent().remove();
var success=window.confirm("删除成功");
$("table tr:odd").css("background","#999999");
$("table tr:even").css("background","#eeeeee");
}else{
return false;
}
});
}
}
//城市二级联动
var citys = new Array(); //一个二维数组，用于存储省市，依次对应
citys[1] = new Array("西二旗", "海淀");
citys[2] = new Array("中牟", "新区");
citys[3] = new Array("固安", "衡水");
function change(value) {
document.getElementById("city").options.length = 0;
for(
var m = 0; m < citys[value].length; m++) {
var o = document.createElement("option");
var node = document.createTextNode(citys[value][m] + "");
o.appendChild(node);
document.getElementById("city").appendChild(o);
}
}
</script>
<script>
function ckAll(){
var cks=document.getElementsByName("ck");
for(var i=0;i<cks.length;i++){
cks[i].checked=!cks[i].checked;
}
4000
}
function delAll(){
var len=$("input[name='ck']:checked");
if(len.length==0){
alert("请选择要删除的数据");
}else{
$(len).parent().parent().remove();
}
}
</script>
</head>
<body>
<form>
姓名：<input type="text" id="name" /><span id="sname"></span>
性别：<select id="sex">
<option checked="checked">男</option>
<option>女</option>
</select>
生日：<input type="text" id="birth" /><span id="sbirth"></span>
住址：<select class="se1" id="province" onchange="change(this.value)">
<option value="1" checked="checked">北京</option>
<option value="2">郑州</option>
<option value="3">河北</option>
</select>
<select class="se2" id="city">
<option value="0" checked="checked">西二旗</option>
</select>
<input class="botn" type="button" onclick="btn()" value="添加" /><br />
<input class="quan" type="button" onclick="ckAll()" value="全选/反选" />
<input class="pi" type="button" onclick="delAll()" value="批量删除" />
</form>
<table style="width: 600px;border:1px solid black;margin-top: 15px;" cellspacing="0px" cellpadding="5px">
<tr style="background-color: #999999">
<td><input type="checkbox" /></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>删除</td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery实现添加删除数据全选反选隔行变色二级联动
- 添加数据+二级联动+全选删除
- AngularJS综合用户信息, 表单验证,过滤查询,全选反选,批量删除,修改,添加
- jquery table表格添加删除数据（含批量删除，全选全不选和简单的表单验证）
- 二级联动实现省市表单添加删除操作
- jQuery表单验证添加数据删除数据
- jquery表单验证添加到表格再删除easyNew
- 二级联动添加表格及删除按钮弹出对话框
- 【php基础班】第15天 显示隐藏效果、购物车、form对象、表单验证、二级联动菜单
- HTML jquery 添加+删除+批量删除+二级联动
- 动态添加删除Option达到二级联动
- 用js制作form表单验证、二级联动、登陆界面升级版
- jquery 验证 添加 批量删除 全选/反选
- jQuery表单验证和添加表格 删除修改
- 表单 的 地址联动 添加~删除
- 表单验证和二级联动
- 表单验证+添加+查询+排序+删除
- 添加批量删除二级联动②
- HTML 添加+二级联动+ 删除+批量删除
- js入门·表单元素（select下拉列表）制作二级联动菜单和网站导航 .txt