动态添加、删除每行 form 表单

最新推荐文章于 2024-05-29 12:15:14 发布
最新推荐文章于 2024-05-29 12:15:14 发布
阅读量7.5k 收藏 12
点赞数
文章标签： html bootstrap form
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ting119/article/details/79844779
版权

效果图：



代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<form role="form-group" style="display: inherit;width: 460px;margin-top: 20px;margin-left: 20px" id="tb">
    帐号: <input type="text"
               placeholder="请输入帐号">
    密码: <input type="password"
               placeholder="请输入密码">
    <img src="add.png" alt="" οnclick="add()" style="width:30px">
</form>
<div class="btn btn-default" style="margin-top: 20px;margin-left: 200px">提交</div>
</body>
</html>

<script>
    
    function add() {
        var form = document.createElement("form-group");
        form.id = new Date().getTime();
        form.innerHTML = "<form role='form-group' style='display: inherit;width: 550px'>" +
                "帐号: " + "<input  placeholder='请输入帐号'/>" +
                " 密码: <input  placeholder='请输入密码'/>" +
                "<img src='del.png'οnclick='del(this)' style='width:30px'></form>";
        document.getElementById("tb").appendChild(form);
    }

    function del(obj) {
        var formID = obj.parentNode.parentNode.id;
        var form = document.getElementById(formID);
        document.getElementById("tb").removeChild(form);
    }
</script>
ting119
关注
  • 0
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
动态添加表单
06-13
对学习表单制作的同学有很大的帮助哦
vue 动态添加form表单
weixin_38673922的博客
04-18 6318
一、效果图 二、代码块 <template> <!-- 动态添加form表单--> <div class="hello"> <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" /> <!-- 动态表单增加 --> <div v-for="(item,index) in list"
Ant Design 动态增减form表单，第二三项根据第一项选中内容动态展示内容
最新发布
wang_59881的博客
05-29 432
根据选中的第一项，动态展示第二项第三项，以及第三项的类型是下拉框还是input，和单位unitName。点击添加条件，第二条仍然只展示第一项select框。提交数据部分就不写了，提交跟接口相对应的数据就行。// 编辑时数据回显，后端返回的数据。选中第一项下拉框，第二第三项展示。
动态表单添加及动态删除元素
qq_33663071的博客
01-07 1558
无标题文档 $(function(){    //绑定添加联系方式超链接的点击事件 $("#linkAdd").click( function(){ //创建新的联系方式的DIV元素 var div=$("删除"); //将新创建的div元素以最后一个子元素添加到contacts中 //div.appendTo($("#contacts")); $("#conta
添加,删除表单项
conkeyn的专栏
02-14 139
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;met
动态添加form表单，表单中包括表格的td和tr标签(失败)
wflsyf的博客
02-05 712
尝试了很多种方法 1、jquery中的appemd 方法，直接添加在表格后，但是没成功。 2、用appendto和appendChild还是没用。 3、用dom的创建新元素form然后追加的方法还是无效。 尝试了一下午还是失败了，最后只有另起一个servlet，来编写插入功能实现。 ...
Vue form表单动态添加组件实战案例
10-16
在Vue.js应用中，表单动态添加组件是一个常见的需求，特别是在构建可扩展和灵活的用户界面时。Vue的`v-for`指令是实现这一功能的关键。在这个实战案例中，我们将探讨如何利用Vue来动态地在表单中添加和移除组件，...
使用Vue动态生成form表单的实例代码
08-27
使用Vue动态生成form表单的实例代码 以下是关于使用Vue动态生成form表单的实例代码的知识点总结： 1. 使用Vue动态生成form表单的实例代码可以使用FormCreate插件来实现。FormCreate是一个基于Vue的动态form表单...
Bootstrap 表单验证formValidation 实现表单动态验证功能
08-30
Bootstrap 表单验证formValidation 实现表单动态验证功能 Bootstrap 表单验证formValidation 实现表单动态验证功能是指利用 Bootstrap 框架和 formValidation 插件实现对表单的动态验证功能。该功能可以动态添加或...
ExtJs 动态添加表单
03-25
它可能包含了创建表单、动态添加和删除字段的逻辑，以及与服务器通信的代码。通过阅读和分析这个文件，我们可以更深入地了解如何在实际项目中应用这些技术。 总之，动态添加表单是ExtJS开发中的一个重要技巧，它...
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
通过与el-form结合，可以实现表格内的动态表单验证，例如，每行表格数据都可以独立进行验证。 4. 动态添加和删除操作： 在实际应用中，往往需要支持用户在表单中动态添加或删除字段。Vue的数组操作方法（如push、...
JavaScript实现动态添加Form表单元素的方法示例
10-19
主要介绍了JavaScript实现动态添加Form表单元素的方法,结合实例形式分析了javascript表单元素操作相关函数使用方法与相关注意事项,需要的朋友可以参考下
ASP+JS实现表格实时添加行
07-24
ASP+JS实现表格实时添加行 et 用JS实现
基于bootstrap的动态表单的实现
11-21
动态表单的简单实现，可以利用拖拽的形式，设计表单，可以拖拽的控件包括input框、select框、复选框、单选框等等
原生js可编辑表格实现动态添加表格行数和删除表格行数
11-11
原生js可编辑表格实现动态添加表格行数和删除表格行数
Angularjs 动态添加表单
05-03
在GitHub上的AngularJS-Adding-form-fields-dynamically-master项目中，你可以找到一个完整的动态添加表单的示例。该项目可能包含以下关键组件： - `index.html`: 主页面，包含`ng-app`定义和`ng-view`指令，用于...
动态创建form表单
wenmin1987的博客
07-22 1245
<template> <div> <el-form size="mini" class="lj-formlj-form-s1" :model="table" ref="ruleForm" :rules="rules" > <divv-for="(item,index)intable.customerList":key="index"> ...
通过数组 对表单文本域的动态新增、排序（数据上、下移动）、删除
qq_41193701的博客
01-03 224
html代码块: 脚本以及数据： dataNodes: [{ name: '', class: '', reports: 0 }] 操作事件方法： // 添加文本域 addNode() { this.dataNodes.push({ name: '', class: '', reports: 0 }) }, // 移动文本域位置 change...
表单的新增与删除
ybyfu的博客
06-08 778
动态表单是可以在页面上增加，修改和删除的。 我们需要设置一个新增按钮，当点击它时，会弹出一个模态框，模态框中是需要新增的信息。 这个“show”是弹出模态窗体，和它对应的是“hide”，关闭模态窗体。当用户填写完信息，就要将信息提交到控制器中，由控制器与数据库交接完成新增操作。 在提交之前，需要将表单序列化成为一个数组，并可以给出一个检查的判断,检查客户是否漏写。 我们在Models文件夹中将数据库中我们所需要的表映射过来。它会自动生成一个实体类容器的页面，在控制器中，采用实体类来与数据库交
vue3实现动态添加form表单
11-30
在Vue3中实现动态添加form表单可以通过以下步骤完成： 1. 在模板中定义一个表单，使用v-for指令循环渲染表单项，同时绑定一个唯一的key值，方便后续操作。 2. 定义一个data属性，用于存储表单数据，可以使用数组来存储多个表单项的数据。 3. 定义一个方法，用于添加表单项，该方法会向表单数据数组中push一个空对象，用于存储新增表单项的数据。 4. 定义一个方法，用于删除表单项，该方法会根据索引值从表单数据数组中删除对应的表单项数据。 下面是一个示例代码，演示如何在Vue3中实现动态添加form表单： ```html <template> <div> <form> <div v-for="(item, index) in formItems" :key="index"> <label>姓名：</label> <input type="text" v-model="item.name"> <label>年龄：</label> <input type="text" v-model="item.age"> <button type="button" @click="removeFormItem(index)">删除</button> </div> </form> <button type="button" @click="addFormItem">新增购房人基本信息</button> </div> </template> <script> import { reactive } from 'vue'; export default { setup() { const state = reactive({ formItems: [{ name: '', age: '' }] }); const addFormItem = () => { state.formItems.push({ name: '', age: '' }); }; const removeFormItem = (index) => { state.formItems.splice(index, 1); }; return { formItems: state.formItems, addFormItem, removeFormItem }; } }; </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值