表单注册并删除

最新推荐文章于 2021-08-05 14:43:30 发布
最新推荐文章于 2021-08-05 14:43:30 发布
阅读量334 收藏
点赞数 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>week2模拟</title>
        <script type="text/javascript" src="js/jQuery-2.1.0/jquery-2.1.0.js" ></script>
        <script>
            $(function (){
                var arr = [
                        ["东城","西城","崇文","宣武","朝阳","丰台","石景山","海淀","门头沟","房山","通州","顺义","昌平","大兴","平谷","怀柔","密云","延庆" ]
                        ,
                        ["黄浦","卢湾","徐汇","长宁","静安","普陀","闸北","虹口","杨浦","闵行","宝山","嘉定","浦东","金山","松江","青浦","南汇","奉贤","崇明"]
                        ,
                        ["和平","东丽","河东","西青","河西","津南","南开","北辰","河北","武清","红挢","塘沽","汉沽","大港","宁河","静海","宝坻","蓟县" ]
                        ,
                        ["万州","涪陵","渝中","大渡口","江北","沙坪坝","九龙坡","南岸","北碚","万盛","双挢","渝北","巴南","黔江","长寿","綦江","潼南","铜梁","大足","荣昌","壁山","梁平","城口","丰都","垫江","武隆","忠县","开县","云阳","奉节","巫山","巫溪","石柱","秀山","酉阳","彭水","江津","合川","永川"]
                        ];
                var flag1=false;
                var flag2=false;
                var flag3=false;
                var flag4=false;

                var $name=$("#name");
                var $pwd=$("#pass");
                var $age=$("#age");
                var $provence=$("#provence");
                var $city=$("#city");
                $name.blur(function(){
                    if($name.val()==""){
                        alert("请输入用户名");
                    }else{
                        flag1=true;
                    }
                });
                $pwd.blur(function() {
                    var $pl = $pwd.val().length;
                    if($pl > 4 && $pl < 16) {
                        flag2 = true;
                    } else {
                        alert("长度在4-16位之间");
                        flag2 = false;
                    }
                });

                $age.blur(function() {
                    if($age.val() < 1 || $age.val() > 300) {
                        alert("请输入正确的年龄");
                        flag3 = false;
                    } else {
                        flag3 = true;
                    }
                });
                $provence.change(function(){
                    $("#city option").remove();
                    var ind=$(this).val();
                    for(c in arr[ind]){
                        var $city=$("#city");
                        var $cs=$("<option>"+arr[ind][c]+"</option>");
                        $city.append($cs);
                    }
                });
                $("#btn").click(function(){
                    if(flag1 && flag2 && flag3){
                        var $namev=$("#name").val();
                        var $pwdv=$("#pass").val();
                        var $agev=$("#age").val();
                        var $sexv=$("input[name='sex']:checked").val();
                        var $provencev=$("#provence option:selected").html();
                        var $cityv=$("#city option:selected").html();
                        var $data=$("#data");
                        var a=$("<tr><td><input type='checkbox'><td>"+$namev+"</td><td>"+$pwdv+"</td><td>"+$agev+"</td><td>"+$sexv+"</td><td>"+$provencev+"-"+$cityv+"</td></td></tr>");
                        $data.append(a);
                    }else{
                        alert("请按要求输入信息");
                    }
                });
            });
        </script>
        <script>
            $(function(){
                $("#all").click(function(){
                var fl=$(this).prop("checked");
                alert(fl);
                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且没有id属性的都删除
                    $("#data :checked").not("[id]").parent().parent().remove(); //移除所有被选中的input元素


                }) 
            });

        </script>
    </head>
    <body>
        <h3 align="center">用户注册</h3>
        <table align="center" border="1px" cellspacing="0" >
            <tr>
                <th>用户名</th>
                <td><input type="text" placeholder="用户名不能为空" id="name"/></td>
            </tr>
            <tr>
                <th>密&nbsp;码</th>
                <td><input type="password" placeholder="长度在4-16位之间" id="pass"/></td>
            </tr>
            <tr>
                <th>年&nbsp;龄</th>
                <td><input type="number" placeholder="年龄必须是数字" id="age"/></td>
            </tr>
            <tr>
                <th>性&nbsp;别</th>
                <td><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女</td>
            </tr>
            <tr>
                <th>住&nbsp;址</th>
                <td>省<select id="provence"><option value=0>北京</option><option value=1>上海</option>
                            <option value=2>天津</option>
                            <option value=3>重庆</option></select>
                    市<select id="city"><option >海淀区</option></select>
                </td>
            </tr>
            <tr>
                <td colspan=2 align="center"><input type="button" value="提交" id="btn"/></td>
            </tr>
        </table><br /><br />

        <center><button id="del">批量删除</button></center><br /><br />

        <table align="center" border="1px" cellspacing="0" id="data">
            <tr>
                <td><input type="checkbox" id="all"/></td>
                <th>用户名</th>
                <th>密&nbsp;码</th>
                <th>年&nbsp;龄</th>
                <th>性&nbsp;别</th>
                <th>住&nbsp;址</th>
            </tr>
        </table>
    </body>
</html>
cherise_z
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
表单的新增与删除
ybyfu的博客
06-08 778
动态表单是可以在页面上增加，修改和删除的。 我们需要设置一个新增按钮，当点击它时，会弹出一个模态框，模态框中是需要新增的信息。 这个“show”是弹出模态窗体，和它对应的是“hide”，关闭模态窗体。当用户填写完信息，就要将信息提交到控制器中，由控制器与数据库交接完成新增操作。 在提交之前，需要将表单序列化成为一个数组，并可以给出一个检查的判断,检查客户是否漏写。 我们在Models文件夹中将数据库中我们所需要的表映射过来。它会自动生成一个实体类容器的页面，在控制器中，采用实体类来与数据库交
QT操作注册表（制作安装卸载包）
阳光柠檬_的技术笔记
11-18 4929
增加注册表 #define APP_NAME "APPXX" #define RUN_EXE "APPXX.exe" #define APP_LNK "APPXX.lnk" #define UNINSTALL_EXE "APPXXUninstall.exe" #define REGEDIT_NAME "HKEY_LOCAL_MACHINE\\S
windows删除注册表（通用方法）
热门推荐
yuanyuan214365的博客
04-22 3万+
1、注册表       注册表（Registry，繁体中文版Windows操作系统称之为登录档）是Microsoft Windows中的一个重要的数据库，用于存储系统和应用程序的设置信息。早在Windows 3.0推出OLE技术的时候，注册表就已经出现。随后推出的Windows NT是第一个从系统级别广泛使用注册表的操作系统。但是，从Microsoft Windows 95操作系
JS实现简单的表单增加删除功能
御晨风而归
04-09 9690
html部分： <div> <label for="">编号：</label><input type="text" id="txt1"> <label for="">姓名：</label><input type="text" id="txt2"> <label for="">住址：</lab...
系统服务器表单如很删除,如何删除系统默认打印机表格？
weixin_31953847的博客
08-05 1085
标准纸张形式是打印机驱动程序的一部分，只能从相应的文件中手动删除。这是我如何做到的指南：1.以管理员身份打开CMD。2.输入“ printui / s / t2”(不带引号)3.在打开的窗口中，选择要删除纸张形式的打印机，然后单击底部的“属性”。4，在指定路径下的资源管理器中查找列出的文件(可能是C：\ Windows \ System32 \ spool \ drivers \ x64 \ 3)...
jquery高级注册表单.zip
07-05
《jQuery高级注册表单》是关于使用jQuery技术构建复杂、交互性强的注册表单的教程。这个主题主要涉及JavaScript库jQuery的高级应用，特别是与HTML表单和按钮相关的交互效果。在网页开发中，表单是收集用户信息的重要...
jQuery实现表单动态添加与删除数据操作示例
10-18
本示例展示了如何使用jQuery来实现表单中的动态添加和删除数据功能，这对于构建交互性较强的用户界面非常有用。以下是对这个示例的详细解释： 首先，HTML部分创建了一个简单的注册表单，包含用户名、密码和邮箱...
Angular4实现动态添加删除表单输入框功能
08-29
"Angular4实现动态添加删除表单输入框功能" Angular4实现动态添加删除表单输入框功能是指在Angular4框架下动态地添加或删除表单输入框，以满足不同场景下的需求。本文将详细介绍Angular4实现动态添加删除表单输入框...
Jquery表单注册
06-18
"Jquery表单注册"是利用jQuery来实现用户注册功能的一个常见应用场景，下面将详细介绍这个主题。 一、jQuery简介 jQuery是由John Resig在2006年创建的，它的口号是"Write Less, Do More"。jQuery的核心特性包括选择...
jQuery分步骤网站用户注册表单模板源码.rar
01-27
jQuery可以轻松地定位DOM元素并添加、删除CSS类，以显示错误状态。同时，使用`.html()`或`.text()`更新错误消息。 8. **表单插件**： 源码可能还包括一些流行的jQuery表单插件，如验证插件（validate）、日期选择...
Windows下打印服务器的管理（一）
weixin_34138255的博客
11-24 1183
    Windows下的打印服务器是指一台安装了打印机、并将打印机共享给网络上的用户使用的计算机。目前市场有许多硬件的打印服务器产品，用户可以通过直接通过它来打印文件。    以下测试操作在虚拟机环境下进行：    一台服务器DCSrv01,DC，Windows Server 2008 R2，连接三台打印机；    一台客户机Client01,Windows7,加入域。一、架设打印服务器    ...
单击事件 - 删除表单数据时提示是否确认删除
不想懂得Zenith
10-24 2821
在实际表单操作中, 删除是一个风险比较大的操作, 一旦删除, 数据很难恢复. 所以我们在删除表单项前应提示是否确认删除, 避免因手误造成的不必要的误删的现象.  我们还是基于上一篇文章进行编写: https://blog.csdn.net/weixin_42629433/article/details/83316072 如下:  &lt;%--&lt;a href="${pageConte...
html表单添加和删
systemin的博客
11-26 808
html表单添加和删
物联网工程_基于RFID的食堂食品安全监测系统设计.docx
07-20
物联网工程_基于RFID的食堂食品安全监测系统设计
VisualSVN-VS2022
最新发布
07-20
VisualSVN-VS2022-8.0.5.vsix SVNVS插件，使用VS自带更新速度太慢，可下载后直接安装即可
基于PSO优化的BP神经网络训练与测试matlab仿真，包括程序，注释，参考文献，操作步骤
07-20
1.版本：matlab2022A。 2.包含：程序，中文注释，参考文献，仿真操作步骤（使用windows media player播放）。 3.领域：PSO优化的BP神经网络 4.仿真效果：仿真效果可以参考博客同名文章《基于PSO优化的BP神经网络训练与测试matlab仿真》 5.内容：基于PSO优化的BP神经网络训练与测试matlab仿真。粒子群优化（Particle Swarm Optimization, PSO）结合BP（Backpropagation）神经网络是一种常见的优化方法，用于提升神经网络的学习能力和泛化能力。PSO不仅帮助BP神经网络找到了一个较好的初始解，从而可能加快了训练过程并提高了最终模型的质量，而且还能探索到更广泛的解空间，有助于避免局部最优解。 6.注意事项：注意MATLAB左侧当前文件夹路径，必须是程序所在文件夹位置，具体可以参考视频录。
超详细讲C++cout语句
07-20
超详细讲C++cout语句，专门为C++初学者录制。
表单动态删除字段添加字段
11-08
这种功能通常用于需要用户根据实际情况自定义表单内容的场景，例如问卷调查、注册页面等。 实现表单动态删除和添加字段的方法有很多种，其中比较常见的是使用JavaScript编写脚本来实现。具体来说，可以通过以下步骤...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值