Bootstrap-table动态新增行，删除行，可编辑```html 添加行删除行确定取消 ``````html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
			integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.21.2/bootstrap-table.min.css" rel="stylesheet">
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
			integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
		</script>
		<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.21.2/bootstrap-table.min.js"></script>
	</head>
	<body>
		<div class="table-box" style="margin: 20px;">
			<div id="toolbar">
				<a id="addRow" onclick="addRow()">添加行</a>
				<a id="removeRow" onclick="removeRow()">删除行</a>
			</div>
			<hr>
			<table id="exampleTable"></table>
			<hr>
			<div>
				<button onclick="getData()">确定</button>
				<button onclick="cancel()">取消</button>
				<button onclick="submit()">提交</button>
			</div>
		</div>

		<script type="text/javascript">
			let tdData
			
			$(function() {
				$('#exampleTable').bootstrapTable({
					striped:true,
					pagination:true,
					pageSize:2,
					pageList:[2,4,6,8],
					paginationPreText: "<",
					paginationNextText: ">",
					paginationLoop: false,
					width: 200,
					idField: 'ProduceID',
					columns: [{
							checkbox: true
						},
						{
							title: '序列',
							field: 'index',
							formatter: function(value, row, index) {
								return row.index = index + 1;
							}
						}, {
							title: '联系人',
							field: 'contactsName',
							formatter: function(value, row, index) {
								return "<input id='" + index + "contactsName'  type='number' step='1' onblur='setValue(" + index + ")' value='" + (value===undefined ? '' : value) +  "'></input>"
							}
							
						}, {
							title: '邮箱',
							field: 'email',
							formatter: function(value, row, index) {
								return "<input id='" + index + "email'  type='number' step='1' onblur='setValue(" + index + ")' value='" + (value===undefined ? '' : value) +  "'></input>"
							}
						}, {
							title: '电话',
							field: 'telphone',
							formatter: function(value, row, index) {
								return "<input id='" + index + "telphone'  type='number' step='1' onblur='setValue(" + index + ")' value='" + (value===undefined ? '' : value) +  "'></input>"
							}
						}, {
							title: '备注',
							field: 'comment',
							formatter: function(value, row, index) {
								return "<input id='" + index + "comment'  type='text' onblur='setValue(" + index + ")' value='" + (value===undefined ? '' : value) +  "'></input>"
							}
						}
					],
					responseHandler:function(){},
					onClickCell: function(field, value, row, $element) {
						// $element.attr('contenteditable', true);
						// $element.blur(function () {
						// 	let index = $element.parent().data('index');
						// 	console.log(index);
						// 	let tdValue = $element.html();
						// 	console.log(tdValue);
						// 	saveData(index, field, tdValue);
						// })
					},
					// 行点击事件
					onClickRow: function (row, $element) {},
					// 表格渲染完成事件
					onPostBody() {},
					onLoadSuccess(data) {
						//boss.tableInit($('#tableItem'));
					}
				})
			})

			// onClickCell 无法监听格式化后 input 内的 blur 事件，所以给 rows 添加。
			function setValue(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;
					}
				});
				console.log('rows1',rows);
		     }
			 
			 // 拿到列表数据
			 function getData(){
				 var rows = $('#exampleTable').bootstrapTable('getData');
				 console.log('row2',rows)
			 }

			

			// 更新列表数据
			function saveData(index, field, value) {			
				$('#exampleTable').bootstrapTable('updateCell', {
					index: index,       //行索引
					field: field,       //列名
					value: value        //cell值
				})
			}
		
			function getData(){
				var rows = $('#exampleTable').bootstrapTable('getData');
				tdData = JSON.stringify(rows)
				console.log('tdData',tdData);	
			}

			function addRow() {
				console.log('addRow');
				var row = {
					"contactsName": "",
					"email": "",
					"telphone": "",
					"comment": ""
				};
				$('#exampleTable').bootstrapTable('append', row)
			}

			function removeRow() {
				var rows = $('#exampleTable').bootstrapTable('getSelections');
				if (rows.length == 0) {
					console.log('请选择要删除的数据');
					return;
				}
				var indexs = [];
				for (var i = 0; i < rows.length; i++) {
					indexs[i] = rows[i].index;
				}
				$('#exampleTable').bootstrapTable('remove', {
					field: 'index',
					values: indexs
				});
			}
					
			function cancel(){
				console.log('取消，然后关闭模态框');
			}
			
			
			function submit(){
				$.ajax({
					type:'post',
					url:'xxx',
					data:tdData, // 向后端发送的数据
					contentType: "application/json", // 向后端发送的数据格式
					dataType:'json',  // 预期会接收到的数据格式
					dataType: "json",
					timeout:3000,
					beforeSend:function(){
						console.log('发送前的操作');	
					},
					success:function(res){
						console.log('成功发送，并拿到返回的数据。');
					},
					error:function(XMLHttpRequest, textStatus, errorThrown){
						console.log('发送失败，查看错误情况。');
					}
					
				})
			}
		
		
		</script>
	</body>
</html>