Fork me on github

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;
        })

 

posted @ 2022-12-26 09:51  我の前端日记  阅读(134)  评论(0编辑  收藏  举报
Copyright © 2021 LinCangHai
Powered by .NET 5.0 on Kubernetes