添加表单

最新推荐文章于 2023-01-13 23:08:13 发布
最新推荐文章于 2023-01-13 23:08:13 发布
阅读量431 收藏 1
点赞数
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiaosheng1/article/details/78231877
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script src="jquery-2.1.0.js"></script>
<script>
var arr = new Array();
 function dianji(){
        var name = $("#nameId").val();
        var namespan = $("#nameSpan");
        var email = $("#emailId").val();
        var emailspan = $("#emailSpan");
        var phone = $("#phoneId").val();
        var phonespan = $("#phoneSpan");

        var flag = true;
        /*姓名判断为空*/
        if(name == null || name=="")
        {
            namespan.html("姓名不能为空!");
            flag=false;
        }else
        {
            namespan.html("");
        }
        /*邮箱判断不为空*/
        if(email == null || email=="")
        {
            emailspan.html("邮箱不能为空!");
            flag = false;
        }else
        {
            emailspan.html("");


        }
        /*电话不能为空只能是11位*/
        if(phone == null || phone=="" )
        {
            phonespan.html("电话不能为空!");

            flag = false;
        }else
        {
            phonespan.html("");

            if(phone.length==11)
            {
                    phonespan.html("");
            }else
            {
                phonespan.html("必须11位!")    ;
                flag = false;
            }
        }

        if(flag)
        {
             arr.push(new Array(name,email,phone));

            var tab = document.getElementById("tab");
            tab.innerHTML="<tr><td>姓名</td><td>邮箱</td><td>电话</td><td>操作</td></tr>";
           $(arr).each(function(index){
               tab.innerHTML +="<tr><td>"+this[0]+"</td><td>"+this[1]+"</td><td>"+this[2]+"</td><td><a href='#' onclick='shan("+index+")'>delete</a></td></tr>";   

               });


        }


     }
     function shan(index){
           arr.splice(index,1);
           var ta = $("#tab");
           tab.innerHTML="<tr><td>姓名</td><td>邮箱</td><td>电话</td><td>操作</td></tr>";
           $(arr).each(function(index){
               tab.innerHTML +="<tr><td>"+this[0]+"</td><td>"+this[1]+"</td><td>"+this[2]+"</td><td><a href='#' onclick='shan("+index+")'>delete</a></td></tr>";   
               });

         }
</script>
<body>
姓名:<input type="text"  id="nameId"/><span id="nameSpan"></span><br/>
email:<input type="text" id="emailId"/><span id="emailSpan"></span><br/>
电话:<input type="text" id="phoneId"/><span id="phoneSpan"></span><br/>
<input type="button"  onclick="dianji()" value="提交"/><br/>


<table border="1" id="tab">
  <tr>
    <td>姓名</td>
    <td>邮箱</td>
    <td>电话</td>
    <td>delete</td>
  </tr>
</table>



</body>
</html>
JSHeng@
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery动态添加表单
10-27
jquery动态添加表单
TextView设置下划线等属性
jiaosheng1的博客
06-06 375
下划线 textView.getPaint().setFlags(Paint. UNDERLINE_TEXT_FLAG ); 抗锯齿 textView.getPaint().setAntiAlias(true); 中划线 textview.getPaint().setFlags(Paint. STRIKE_THRU_TEXT_FLAG); 设置中划线并加清晰 textview.setFlags(P...
HTML 表单处理
qq_46457076的博客
01-13 363
Go 语言中的 HTML 表单的处理！
页面添加表单
qq_44538193的博客
06-17 2155
页面添加表单 开发工具与关键技术：Visual Studio 2015 作者：李德新 撰写时间：2019年6月14日 在我们的日常生活中，我们会经常看到我们在页面上点击某个按钮之后便能够在页面上添加一个模态框也或者是一张表单，亦或者是别的一些东西，但相同的都是他们是在我们点击了某个按钮之后自动为我们在我们的HTML代码...
react实战笔记48:增加表单
qq_41632427的博客
10-19 101
前端
普通MVP+XRexyclerview+RxJava+Retrofit+Fresco
jiaosheng1的博客
12-06 536
build.gradle apply plugin: 'com.android.application'android { compileSdkVersion 26 defaultConfig { applicationId "com.example.adminjs.mamm" minSdkVersion 15 targetSdkV
动态添加表单
06-13
对学习表单制作的同学有很大的帮助哦
ExtJs 动态添加表单
03-25
NULL 博文链接：https://fxiaozj.iteye.com/blog/1174901
javascript实现的动态添加表单元素input,button等(appendChild)
10-30
给大家介绍了javascript实现的动态添加表单元素input,button等(appendChild)的实例代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
在Vant的基础上实现添加表单验证框架的方法示例
10-17
主要介绍了在Vant的基础上实现添加验证框架的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Tablayout修改字体大小、颜色、设置背景图以及取消点击阴影
jiaosheng1的博客
06-10 3329
首先，自定义一个布局 <TextView android:id="@+id/tv_tab" android:text="sss" android:layout_gravity="center" android:textColor="#DD2300" android:textStyle="bold" ...
商品详情页面展示
jiaosheng1的博客
11-17 522
build.gradle apply plugin: 'com.android.application' android { compileSdkVersion 26 buildToolsVersion "26.0.2" defaultConfig { applicationId "gouwuche.bwei.com.jiaosheng1117"
动态的添加、删除表单
小浩子的博客
04-12 6707
在写简历时，有一项实习经历，如果没有就不填，如果有就实习经历，有多少写多少。 这个功能是如何实现的，其实很简单，以bootstrap和jquery为例：具体代码实现：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="css/bo
js表单动态添加数据并提交
热门推荐
方全的专栏
03-23 2万+
https://www.cnblogs.com/hujunzheng/p/5069798.htmlv情景1：已经存在form对象了，动态为form增加对象并提交function formAppendSubmit(){        var myform=$('#newArticleForm'); //得到form对象        var tmpInput=$("&lt;input type=...
向form中添加组件元素
过客的博客
03-26 7592
困扰了我一下午，问题终于解决了.... 问题描述：用的jQuery UI的对话框，在里面用到了上传文件这个，之前一直都是像绿色文本标注的那样，form中写个隐藏域，然后将对话框内的中的val传递过去，text传递到hidden中是没有问题的，但file传递给hidden老是出现问题，百思不得姐... 这是jQuery一个很特殊的地方，我的demandDialog明明是在form中的，可调用了j
js动态添加表单form元素
滴水石穿
11-26 1万+
动态添加表单元素      function AddElement(mytype){  var mytype,TemO=document.getElementById("add");  var newInput = document.createElement("input");   newInput.type=mytype;   newInput.name="input1"; 
CSS中表单—创建表单，添加表单项
王春燕的博客
04-13 1149
表单定义：将用户信息等本地的数据信息提交给服务器的，比如：百度的搜索框 注册 登录这些操作都需要填写表单 一、创建表单 form标签 属性：action属性（必须要写） 指向的是一个服务器的地址，当我们提交表单时将会提交到action属性对应的地址 二:添加表单项 使用form创建的仅仅是一个空白的表单，我们还需要向form中添加不同的表单项 （1）input来创建一个文本框，type属性是text，name属性：提交内容的名字 如果希望表单项中的数据会提交到服务器中，必须指定一个name属性
新增表单
The_last_knight的博客
01-31 392
新增表单 新增type属性值 类型 使用示例 含义 email &lt;input type="email"&gt; 输入邮箱格式 tel &lt;input type="tel"&gt; 输入手机号码格式 url &lt;input type="url"&gt; 输入url格式 numbe &lt;input type="number"&a
angular动态添加表单
最新发布
05-20
在Angular中动态添加表单可以使用FormGroup和FormArray。FormGroup用于表示一个表单组，而FormArray用于表示一个表单数组。下面是一个示例： 首先在组件中定义FormGroup： ``` import { Component } from '@angular/core'; import { FormGroup, FormControl, FormArray } from '@angular/forms'; @Component({ selector: 'app-root', template: ` <form [formGroup]="myForm" (submit)="onSubmit()"> <div formArrayName="items"> <div *ngFor="let item of items.controls; let i=index" [formGroupName]="i"> <input type="text" formControlName="name"> </div> </div> <button type="button" (click)="addItem()">Add Item</button> <button type="submit">Submit</button> </form> `, }) export class AppComponent { myForm: FormGroup; constructor() { this.myForm = new FormGroup({ items: new FormArray([]) }); } get items() { return this.myForm.get('items') as FormArray; } addItem() { this.items.push(new FormGroup({ name: new FormControl('') })); } onSubmit() { console.log(this.myForm.value); } } ``` 在模板中，我们使用formArrayName指令来表示一个FormArray，然后使用*ngFor指令来为每个表单项创建一个FormGroup。在addItem方法中，我们向FormArray添加一个新的FormGroup。 这样我们就可以使用addItem方法动态添加表单项了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值