js动态删除添加一行

<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动态删除添加一行的更多相关文章
- js动态删除某一行,内容超出单元格后超出的部分用省略号代替
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <s ...
- jquery on() bind()绑定的点击事件在js动态新添加的元素生效
方法一:$('.class').on("click",function(){……}); 相当于 $('.class').bind("click",functio ...
- js动态删除div元素
在做用户查找时 由于要把查找的结果动态载入和显示,所以,那些html元素要由Ajax动态生成.用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态载入和显示.所以考虑到用js来搞 ...
- 使用js为表格添加一行
今天同事问了我一个问题,为表格添加新的行,我用的js写了一下,代码如下: <!DOCTYPE html> <html> <head> <meta charse ...
- 【解决方案】纯js动态克隆表一行元素
1 m = 0 ;// 用于区分input // 新增一条录入 function AddTR(){ m += 1; var tableObject = document.getElementById( ...
- Jquery 给Js动态新添加的元素 绑定的点击事件
//one $('.class').on("click",function(){ alert('one') }); //相当于$('.class').bind("clic ...
- 如何优雅的用js动态的添加html代码?
把想要的结构写在HTML里,用一个display:none的标签来包裹. 一般而言,会使用: 不设置为type="text/javascript"的script标签 textare ...
- 利用jquery给指定的table动态添加一行、删除一行
转自:http://www.cnblogs.com/linjiqin/p/3148181.html $("#mytable tr").find("td:nth-child ...
- js动态添加-表格逐行添加、删除、遍历取值
关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可.功能包括:表格添加一行 ...
- js动态给table添加/删除tr的方法
js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...
随机推荐
- JUC并发编程
什么是JUC java.util.concurrent* public class Test1 { public static void main(String[] args) { //获取处理器核数 ...
- vue学习笔记(五)---- vue动画
官方文档:https://cn.vuejs.org/v2/guide/transitions.html 一.使用过度类名 没有使用动画之前: <body> <div id=" ...
- App测试Android的闪退总结
Android的闪退有三种情况: 第一种:没有任何弹框提示,直接退出 第二种:有弹框提示程序异常 第三种:ANR无响应 三种情况的日志提交和检索方法: 第一种情况:是底层C挂了 **首先:提交客户端 ...
- 现代图片性能优化及体验优化指南 - 图片类型及 Picture 标签的使用
图片资源,在我们的业务中可谓是占据了非常大头的一环,尤其是其对带宽的消耗是十分巨大的. 对图片的性能优化及体验优化在今天就显得尤为重要.本文,就将从各个方面阐述,在各种新特性满头飞的今天,我们可以如何 ...
- Vue-cli混入、elementUI的使用、vue-router、Vuex
目录 混入.elementUI的使用.vue-router.Vuex 一.Vue项目改成比较纯净的状态及props其他使用 1.Vue项目改成纯净的项目 2.props的其他使用 二.混入(mixin ...
- Powershell获取当前文件夹内所有一级子文件夹大小
需求:查看Windows某个文件夹所有一级子文件夹大小,并按照从大到小排序 解决方案:使用Powershell脚本 脚本内容如下 function filesize () { [string]$f ...
- [POI2011]MET-Meteors 解题报告
语言系统紊乱了 QAQ 这道题感觉不是很难鸭 qwq. 先只考虑一个国家,怎么做?很显然,就直接二分一下就行了.判定答案可以维护一个差分数组,然后最后对它做一个前缀和,再求一下这个国家的流行数量就好了 ...
- python将一行多字符转换为多行单字符方法
笔者这次是第一次写东西,主要是想把在运用中的一些实例给记录下来,分享给那些和笔者有同样需求的人.可能分享的方法有些累赘或者不准确,还望各位大佬勿喷,因为笔者也是python小白,这些都是通过搜索汇总得 ...
- OpenLayers结合JSTS实现空间运算
1. 引言 空间运算利用几何函数来接收输入的空间数据,对其进行分析,然后生成输出数据,输出数据为针对输入数据执行分析的派生结果. 可从空间运算中获得的派生数据包括: 作为输入要素周围缓冲区的面 作为对 ...
- 一文吃透 Go 内置 RPC 原理
hello 大家好呀,我是小楼,这是系列文<Go底层原理剖析>的第三篇,依旧分析 Http 模块.我们今天来看 Go内置的 RPC.说起 RPC 大家想到的一般是框架,Go 作为编程语言竟 ...