添加数据+二级联动+全选删除

最新推荐文章于 2022-11-27 15:51:32 发布

kybkq111

最新推荐文章于 2022-11-27 15:51:32 发布

阅读量401

点赞数

CC 4.0 BY-SA版权

分类专栏：基础

本文链接：https://blog.youkuaiyun.com/kybkq1314/article/details/78506605

基础专栏收录该内容

50 篇文章

订阅专栏

本文介绍了一个用户注册页面的设计与实现过程，重点展示了使用JavaScript进行表单验证的方法，包括用户名、密码及年龄的有效性检查，并通过动态加载技术实现了省市选择功能。此外，还实现了批量操作和数据展示功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>