单击按钮后克隆整个表单元素

2024-03-09

我有以下表格

<form action="" class="form-horizontal">
<div id="wrapper">
    <div class="row-fluid">
        <div class="span6">
            <div class="control-group">
                <label class="control-label"><?=$core->l("default_comm_type");?></label>
                <div class="controls">          
                    <select id="fld_default_comm_type" name="fld_default_comm_type[]" defaultValue="-1" class="m-wrap span10" field="fld_default_comm_type" appEditor="true">
                        <?=combo_creator::render_default_comm_types()?>
                    </select>
                </div>
            </div>
        </div>
        <div class="span4 checkerAlign">
            <div class="control-group">
                <div class="controls">
                    <?=$core->l("is_active");?> 
                </div>
            </div>
        </div>
        <div class="span2 checkerAlign"><input type="checkbox" name="fld_active[]" id="fld_active" editType="booleanEdit" appEditor="true"/></div>
    </div>
    <div><a href="#" id="addMore">Add Row</a></div>
</div>

问题是当用户单击“添加行”按钮时,我需要在其中创建此表单元素的副本

<div id="wrapper">

我怎样才能做到这一点?

编辑:已解决

<form action="" class="form-horizontal" id="wrapper">
<div class="row-fluid">
    <div class="span6">
        <div class="control-group">
            <label class="control-label"><?=$core->l("default_comm_type");?></label>
            <div class="controls">          
                <select id="fld_default_comm_type" name="fld_default_comm_type[]" defaultValue="-1" class="m-wrap span10" field="fld_default_comm_type" appEditor="true">
                    <?=combo_creator::render_default_comm_types()?>
                </select>
            </div>
        </div>
    </div>
    <div class="span4 checkerAlign">
        <div class="control-group">
            <div class="controls">
                <?=$core->l("is_active");?> 
            </div>
        </div>
    </div>
    <div class="span2 checkerAlign"><input type="checkbox" name="fld_active[]" id="fld_active" editType="booleanEdit" appEditor="true"/></div>
</div>
<a href="#" id="addMore">add</a>
</form>

在Js部分:

jQuery("#addMore").click(function(){
 var contents = jQuery("form").html();
    jQuery("#wrapper").append(contents);
});

单击添加时,它会按照我想要的方式插入表单元素 当单击删除时,它会删除元素。谢谢你们的提示 问题解决了!多谢你们。


我认为你需要复制 (row-fluid),而不是全部(Wrapper)内容,这应该可以让您在单击时添加更多原始表单模板行AddMore link.

这是@user2389688 对建议解决方案的编辑:

$("#addMore").click(function(){   
    $(".row-fluid:last").clone().appendTo(".wrapper");  
});

JsFiddle链接:http://jsfiddle.net/tCY8v/1/ http://jsfiddle.net/tCY8v/1/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

单击按钮后克隆整个表单元素 的相关文章

  • AngularJS + jQuery 移动

    是否还有其他可能性来设计AngularJS以移动友好的方式应用程序CSS 我正在计划一个移动应用程序 并希望使用 AngularJS 进行逻辑和数据绑定 但我不想自己设计所有内容CSS The AngularJSFAQ说它使用jQuery
  • JQuery 菜单图标 RTL

    我正在尝试在阿拉伯语 RTL 页面中使用 jQuery 菜单 我可以将其设为 RTL 但图标应该是ui icon carat 1 w not ui icon carat 1 e 我创建jsfiddle在这里 http jsfiddle ne
  • 返回视图作为 JSON 对象的一部分

    我有一个应用程序只加载一次完整视图 我这样做的原因并不重要 重要的是 其余内容只会以部分视图的形式返回 除了一些内容之外 我还有一些 JSON 对象 我想通过每个 AJAX 请求在服务器之间来回传递 有没有办法返回一个 JSON 对象 并将
  • Chrome --app 相当于 Firefox\IE

    我有一个网络应用程序 客户要求单击不同按钮时更改浏览器窗口大小 我发现在那link https stackoverflow com questions 13436855 launch google chrome from the comma
  • Angular2:动态同步http请求

    Goal 发出一系列同步 http 请求并能够将它们作为一个可观察流进行订阅 示例 不工作 let query arr test1 test2 test3 function make request query arr if query a
  • 如何从 html 页面 [javascript] 调用 Web 服务方法而不刷新页面

    我有一个webservice这将返回一个值 我的要求是 我需要调用它webservice从一个index html页面 该页面有一个 html 提交按钮 在该按钮上单击我正在呼叫JavaScript 从那里我想调用网络方法 我怎样才能做到这
  • 轮播滑动(未滑动)事件上的火灾事件,Bootstrap 3

    Bootstrap 2 似乎可以很好地处理幻灯片事件 请参阅这个问题 https stackoverflow com questions 9651466 how to attach slide slid events to the boot
  • 了解 Document.createElement()

    我在用着GWT及其底层DOM能力 我基本上想要实现的是 Have a div包含一些文本的元素 其中一些文本将被包围span元素 span 元素可相互拖动并提供上下文菜单 New span元素可以由最终用户动态创建 它可能是这样的 在应用程
  • Firebase + Node.js:错误:找不到 XMLHttpRequest 兼容性库

    Firebase Node js On iOS 安装的 Node js npm 安装 firebase save 节点测试 js 其中 test js 是一个非常简单的连接到 Firebase 的脚本 var firebase requir
  • 禁用复选框上的输入

    需要在取消选中该复选框时禁用输入 并在选中该复选框时启用它 我的代码是这样的 div class y div
  • WordPress 子主题包括包含文件

    我在一家WordPress使用 AMPPS 作为本地主机在我的本地计算机上进行设置 使用 Delta 主题 我创建了一个子主题 delta2 child 初始设置效果很好 但是 我需要更改包含文件夹中名为 home slider php 的
  • javascript - 如何获取对象名称或关联数组索引名称?

    我有一个像这样的 JSON 对象 var list name1 element1 value1 name2 element1 value2 如何提取所有 nameX 字符串值 例如 假设我想将它们连接在一个字符串中输出 例如 name1 n
  • 使用flex-basis控制行上显示的项目数

    我想在使用 Flex 时将元素推出以隐藏它们 例如 如果flex basis为 50 仅显示两个项目弯曲到给定空间 而其他元素则在overflow hidden 领土 Or if flex basis为 25 则仅显示 4 个 Flex 元
  • 为什么这些内联块元素会产生额外的宽度?

    这是这个问题的后续内容 仅使用 css 自动调整图像下的文本 https stackoverflow com questions 34185547 autofit text under image with only css 为什么这段代码
  • onPress 方法中箭头函数与普通函数的行为

    正在学习 Native React 并学习更多关于 javascript 的知识 所以我仍然不明白它的行为的很多事情 我使用 TouchableOpacity 及其 onPress 属性创建了一个按钮组件 为了让它工作 我必须发送我想要执行
  • Three.js点击单个粒子

    In this example http jsfiddle net agqq96bq 2 您可以看到 2 个可点击的粒子 但它们都受到点击的影响 另外 我只想检测粒子上的点击 而不将它们过滤出场景 像这儿 if intersects len
  • 触发 jQuery UI 滑块事件

    如何触发更改事件jQuery UI 滑块 http docs jquery com UI Slider 我以为会是 slider trigger slidechange 但这没有任何作用 完整的示例脚本如下
  • Vue - 调度完成后调用 store getter?

    我正在使用 Laravel 5 7 Vue2 Vuex 我在调度调用完成后让 Vue 返回存储值时遇到一些困难 我的申请流程如下 我单击一个提交按钮 该按钮调用组件上的 validate Validate 分派到我的 addLease 操作
  • 将网站加载到 DIV 中

    当我在文本框中写入 URL 然后单击提交按钮时 如何实际从网站检索数据 我希望将数据放入我拥有的 div 中 这可能吗 我已经尝试过这个 但它不起作用
  • 为什么 JavaScript 中是 [1,2] + [3,4] = "1,23,4" ?

    我想将一个数组的元素添加到另一个数组中 所以我尝试了以下方法 1 2 3 4 它的回应是 1 23 4 到底是怎么回事 The 操作员没有为数组定义 发生的事情是 JavaScript将数组转换为字符串并将它们连接起来 Update 由于这

随机推荐

  • 背景附件:修复了 translateX(0) 的断裂问题

    我有一个具有固定背景的滚动元素 my element background url foo png no repeat right bottom background attachment fixed 效果很好 通常情况下 但是 如果我对其
  • asp.net mvc 4通过按钮从控制器调用方法

    在我的控制器中 我有类 AccountController 并且在我有这个方法 HttpPost ValidateAntiForgeryToken public ActionResult LogOff WebSecurity Logout
  • Elasticsearch with Tire:具有多个单词的edgeNgram

    假设我有 5 部影片 无太阳 Sansa 这也是吗 索尔 古德 唯一的幸存者 我想实现一个具有以下预期行为的自动完成搜索字段 Sans gt 无太阳 珊莎 无忧无虑 gt 无太阳 所以 gt 这也是 索尔 古德 唯一幸存者 也是 gt 这也
  • ASP.NET MVC 路由和经典 ASP 主页(VBScript,不是 Web 表单)可以很好地协同工作吗?

    我们网站的根目录中有一个经典的 VBScript default asp 页面 这是一个沉重的遗留页面 现在无法选择对其进行转换 我们还有一个新的 ASP NET MVC 2 应用程序 我们希望将其托管在同一站点上 实际上 一切都配合得很好
  • 是否可以重命名带有依赖项的 Maven jar?

    我目前正在使用 jar with dependencies 程序集来创建这样的 jar 不过我的jar名字有点长 由于 AS400 上的 RPG 程序正在使用此 jar 因此我想缩短它以使这些开发人员的生活更轻松一些 但是 除了手动之外 我
  • Golang Gin“c.Param未定义(类型*gin.Context没有字段或方法Param)”

    我尝试使用 Golang 框架 Gin https github com gin gonic gin https github com gin gonic gin 我从官方github复制了示例代码 就像这样 package main im
  • 将命名元组的值从字符串转换为整数

    我正在创建一个脚本来将 csv 文件从其列标题读取到一组命名元组中 然后 我将使用这些命名元组来提取满足特定条件的数据行 我已经计算出输入 如下所示 但在将数据输出到另一个文件之前过滤数据时遇到问题 import csv from coll
  • Rails 多态依赖::destroy 无法正常工作

    假设我有三个 Active Record 模型 class Tissue has many boogers as boogerable dependent destroy end class Finger has many boogers
  • GIF 图像在 .net MAUI 应用程序中不起作用

    我想在我的应用程序中显示一些 gif 动画图像 我用来使用 Xamarin Forms 执行此操作的库是 Xamarin FFImageLoading Svg Forms 现在我们正在将应用程序迁移到 net MAUI 我看到 MAUI 文
  • Amazon AWS EC2 端口:连接被拒绝

    我刚刚在一个全新的 AWS 账户上创建了一个 EC2 实例 位于安全组后面 并在上面加载了一些软件 我正在机器上的端口 4567 当前 上运行 Sinatra 并已在我的安全组中向全世界开放该端口 此外 我可以 ssh 进入 EC2 实例
  • C 编程和 TDD

    测试驱动开发仅限于面向对象吗 或者将它与过程语言结合使用是否可能 有用 接下来的几周我必须开始一个更大的 C 项目 我正在考虑如何开发 TDD 是一个design范例 因此不依赖于任何特定的编程范例 简而言之 在编写代码之前先为代码编写测试
  • 如何在引导选项卡中添加关闭图标?

    我想在引导选项卡中添加一个关闭图标 然后我可以通过单击该图标关闭选项卡 我在下面尝试 但 X 显示的不是与选项卡标题在同一行 close font size 20px font weight bold line height 18px co
  • Spark表如何创建索引?

    我知道 Spark Sql 与 Hive 几乎相同 现在我已经创建了一个表 当我执行 Spark sql 查询来创建表索引时 它总是给我这个错误 SQL 语句中的错误 AnalysisException 创建索引语句中的输入 期望 AS 接
  • 指定的输入源无效

    使用 remix IDE 构建智能合约时 通过以下导入收到无效的输入源指定错误 import https github com aave flashloan box blob Remix contracts aave FlashLoanRe
  • 以极高的精度计算小数?

    出于好奇 我正在编写一个小型 JavaScript 程序来估计数字的值e 由系列 1 n 给出从零到无穷大 问题是 由于 IEEE 754 标准 无论我评估多少个术语 我的答案都会四舍五入到小数点后 16 位 有没有一种方法可以在值达到不考
  • 使用 java 创建快速/可靠的基准测试?

    我正在尝试使用 java 创建基准测试 目前我有以下简单的方法 public static long runTest int times long start System nanoTime String str str for int i
  • 线程环境中的 Clojure 全局变量行为

    鉴于这按我的预期工作 do println resolve a nil def a a println resolve a user a 我想了解为什么这不会 future println resolve b user b shouldn
  • 球互相弹开

    我正在编写这个脚本 其中画布中有 x 个弹跳球 在本例中为 20 个球 我的问题是 如何让它们在撞击时相互弹开 以及在撞击黄色矩形时弹开 var mycanvas document getElementById mycanvas var c
  • 使用 libav 转换 mp4-ts

    我正在尝试使用将 mp4 文件转换为 mpegtslibav 该代码可以工作 但输出的文件无法被任何播放器播放 这里是输入文件 http yt dash mse test commondatastorage googleapis com m
  • 单击按钮后克隆整个表单元素

    我有以下表格