Bootstrap-table动态新增行，删除行，可编辑

Bootstrap-table动态新增行，删除行，可编辑

效果图

html

<div class="table-box" style="margin: 20px;">
   <div id="toolbar">
        <a id="addRow" onclick="addRow()">添加行</a>
        <a id="removeRow" onclick="removeRow()">删除行</a>
    </div>
    <table id="exampleTable"></table>
 </div>
 

js

<script type="text/javascript">
	$(function () {
	$('#exampleTable').bootstrapTable({
	                // url: '',//如果需要请求后台获取初始数据的话，这里写请求地址
	                // toolbar: '#toolbar',
	                // clickEdit: true,
	                // showToggle: true,
	                // pagination: true,       //显示分页条
	                // showColumns: true,
	                // showPaginationSwitch: true,     //显示切换分页按钮
	                // showRefresh: true,      //显示刷新按钮
	                // //clickToSelect: true,  //点击row选中radio或CheckBox
	                columns: [{
	                    checkbox: true
	                },
	                {
	                    field: 'index',
	                    title: '序列',
	                    formatter:function(value, row, index) {
	                        return row.index = index+1; //返回行号
	                    }
	                },{
	                    field: 'contactsName',
	                    title: '联系人',
	                    formatter: function(value,row,index){
	                        var result ="<input id='"+index+"contactsName' placeholder='联系人'" +
	                            "class='form-control'  value='"+(value==undefined?'':value)+"'  οnblur='getValues("+index+")'>";
	                        return result //formatter 这里，里面的value一定要加，不然写值的时候会写不上去
	                    }
	                },
	                {
	                    field: 'email',
	                    title: '邮箱',
	                    formatter: function(value,row,index){
	                        var  result ="<input id='"+index+"email' placeholder='邮箱'" +
	                            "class='form-control' value='"+(value==undefined?'':value)+"' οnblur='getValues("+index+")'>";
	                        return result
	                    }
	                }, {
	                    field: 'telphone',
	                    title: '电话',
	                    formatter: function(value,row,index){
	                        var result ="<input id='"+index+"telphone' placeholder='电话'" +
	                            "class='form-control' value='"+(value==undefined?'':value)+"'  οnblur='getValues("+index+")'>";
	                        return result
	                    }
	                },{
	                    field: 'comment',
	                    title: '备注',
	                    formatter: function(value,row,index){
	                        var result ="<input id='"+index+"comment' placeholder='备注'" +
	                            "class='form-control' value='"+(value==undefined?'':value)+"' οnblur='getValues("+index+")'>";
	                        return result
	                    }
	                }]
	            });
}
//添加行
        function addRow(){
            var row=
                {
                    "contactsName":"",
                    "email":"",
                    "telphone":"",
                    "comment":""
                };
            //append  追加到最后一行
            //prepend  新增到第一行
            $('#exampleTable').bootstrapTable('append', row);
            //更新行数据
            $('#exampleTable').bootstrapTable('updateRow',row);
            //定位到最后一行
            $('#exampleTable').bootstrapTable('scrollTo', 'bottom');
        }

        function getValues(index) {
            var rows = $('#exampleTable').bootstrapTable('getData');
            $.each(rows, function (i, row) {
                if (row.index == (index + 1)) {
                    row.contactsName = $("#" + index + "contactsName").val();
                    row.email = $("#" + index + "email").val();
                    row.telphone = $("#" + index + "telphone").val();
                    row.comment = $("#" + index + "comment").val();
                    $('#exampleTable').bootstrapTable('updateRow', row);
                    return false;
                }
            });
        }

        function removeRow(){
            var rows = $('#exampleTable').bootstrapTable('getSelections');//获取选中行
            if (rows.length == 0) {
                layer.msg("请选择要删除的数据");
                return;
            }
            var indexs=[];
            for(var i=0;i<rows.length;i++){
                indexs[i]=rows[i].index;
            }
//删除
            $('#exampleTable').bootstrapTable('remove', {
                field:'index',
                values:indexs
            });

        }
</script>

嗯，就这样。
如果觉得这个不太行的话，另一个博客指路：https://blog.csdn.net/dizuncainiao/article/details/81742971