<div class="input-dyna-add">
<form class="form-inline form-group" role="form">
<div class="form-group">
<label for="source_type">类型</label><select name='source_type' class="form-control" onchange="selectOnchang(this)">
<option value="0">USBCAMERA</option>
<option value="1" selected>RTSP</option>
</select>
</div><div class="form-group">
<label for="stream_url">接入地址</label><input name='stream_url' type="text" class="form-control" placeholder="请输入接入地址">
</div><div class="form-group" style="display:none">
<label for="stream_url">索引编号</label><select name='stream_url' class="form-control">
<option value="0" selected>0</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
</select>
</div><div class="form-group">
<label for="remark">备注</label> <input name='remark' type="text" class="form-control" id="" placeholder="备注">
</div><div class="form-group">
<label for="isEnable">是否启用</label><input name='switch' type="checkbox">
</div><div class="form-group"><button class='removeclass btn btn-danger' type='button'><span>删除</span></button></div>
</form>
</div>
<div class="form-group col-sm-offset-6" style=" margin-top: 2rem;">
<button onclick="addInput()" type="submit" class="btn btn-default" style=" background-color: #fff; color: #333;">+添加</button>
<button onclick="btnSaveFall()" type="submit" class="btn btn-default" style=" background-color: #755e90; color: #fff;">保存</button>
</div>
 function addInput() {
var input = $("<form class='form-inline form-group' role='form'><div class='form-group'><label for='source_type'>类型</label><select type='text' class='form-control' name='source_type' onchange='selectOnchang(this)'><option value='0'>USBCAMERA</option><option value='1' selected>RTSP</option></select></div><div class='form-group'><label for='stream_url'>接入地址</label><input type='text' class='form-control' name='stream_url' placeholder='请输入接入地址'></div><div class='form-group' style='display:none'><label for='stream_url'>索引编号</label><select name='stream_url' class='form-control'><option value='0' selected>0</option><option value='1' >1</option><option value='2' >2</option><option value='3' >3</option></select></div><div class='form-group'><label for='stream_url'>备注</label><input type='text' class='form-control' name='remark' placeholder='备注'></div><div class='form-group'><label for='isEnable'>是否启用</label><input type='checkbox' name='switch'></div><button class='removeclass btn btn-danger' type='button'><span>删除</span></button></form>") // append 表示添加在标签内, appendTo 表示添加在元素外尾
$(".input-dyna-add").append(input);
$('[name="switch"]').bootstrapSwitch({
onText: "是",
offText: "否",
onColor: "success",
offColor: "info",
size: "small",
handleWidth: "30"
})
}
 $("body").on("click", ".removeclass", function (e) {
$(this).parent('form').remove();
return false;
})

js动态删除添加一行的更多相关文章

  1. js动态删除某一行,内容超出单元格后超出的部分用省略号代替

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <s ...

  2. jquery on() bind()绑定的点击事件在js动态新添加的元素生效

    方法一:$('.class').on("click",function(){……}); 相当于 $('.class').bind("click",functio ...

  3. js动态删除div元素

    在做用户查找时 由于要把查找的结果动态载入和显示,所以,那些html元素要由Ajax动态生成.用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态载入和显示.所以考虑到用js来搞 ...

  4. 使用js为表格添加一行

    今天同事问了我一个问题,为表格添加新的行,我用的js写了一下,代码如下: <!DOCTYPE html> <html> <head> <meta charse ...

  5. 【解决方案】纯js动态克隆表一行元素

    1 m = 0 ;// 用于区分input // 新增一条录入 function AddTR(){ m += 1; var tableObject = document.getElementById( ...

  6. Jquery 给Js动态新添加的元素 绑定的点击事件

    //one $('.class').on("click",function(){ alert('one') }); //相当于$('.class').bind("clic ...

  7. 如何优雅的用js动态的添加html代码?

    把想要的结构写在HTML里,用一个display:none的标签来包裹. 一般而言,会使用: 不设置为type="text/javascript"的script标签 textare ...

  8. 利用jquery给指定的table动态添加一行、删除一行

    转自:http://www.cnblogs.com/linjiqin/p/3148181.html $("#mytable tr").find("td:nth-child ...

  9. js动态添加-表格逐行添加、删除、遍历取值

    关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可.功能包括:表格添加一行 ...

  10. js动态给table添加/删除tr的方法

    js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...

随机推荐

  1. C#,Winform软件防破译-源代码加密简单方法之.NET REACTOR(二)制作软件及软件试用时间限定

    二.简单介绍使用 .net reactor 软件制作试用软件,利用license制作授权软件的方法. 1.首先,生成试用版软件 设置主文件和附属文件,打开.net Reactor 设置试用期限,在Se ...

  2. Vue15 v-for和key的作用及原理

    部分转自https://blog.csdn.net/cun_king/article/details/120714227 1 v-for指令 1.1 简介 用于遍历. 当在组件中使用 v-for 时, ...

  3. Javaweb-Tomcat(安装+配置环境)

    Tomcat跟着教程,但是在bin目录下点击startup只能闪退的总结 1.先下载 直接搜tomcat下载就可以了(free) 2.解压到你想要的文件中 3.直接进入bin目录,找startup.b ...

  4. Seal 0.4 发布:软件供应链安全洞察更上一层楼!

    今天,我们很高兴宣布 Seal 0.4 已正式发布!在上一个版本中,Seal 完成了从单一产品到全链路平台的转变,通过全局视图帮助用户掌握软件开发生命周期各个环节的安全状况. 在 Seal 0.4 中 ...

  5. python爬虫学习——文件操作,异常处理

    文件操作 ''' f = open("a.txt","w") #打开一个文件, w模式(写),如果文件不存在就在当前目录下创建 f.write("he ...

  6. gitbook使用指南

    一. node 下载 不要去node官网下载,那是最新版的,官方没提供旧版node.如果下载了最新版的还得下载一个管理node版本的工具,很麻烦且没必要. 在这个网站下载node:https://no ...

  7. JZOJ 4250.路径

    \(\text{Solution}\) \(30\) 分暴搜合法路径 另 \(30\) 分状压 设 \(f_{i,j,k}\) 表示当前到第 \(i\) 个点,走过的点状态为 \(j\),走过的路径长 ...

  8. python下载图片实现方法

    转载: https://www.jb51.net/article/119178.htm

  9. js获取时间戳的方法

    js获取时间戳的方法 转载脚本之家: https://www.jb51.net/article/77066.htm 转载博客园八英里: https://www.cnblogs.com/deepalle ...

  10. 常见数据库mysql、oracle和DB2中is null 和 =null 的区别

    问题背景:前段时间我在测试过程中上传一个文件,文件内容要求判断为空,结果出现了报错,跟踪原因发现是开发误将oracle中对null的判断方式写成了=null,下面梳理一下不同数据库对该问题的处理方法: ...