也许是最简单的bootstrap-table 表格行内编辑实现！！！

原创已于 2024-12-21 14:16:30 修改

· 7w 阅读

144 ·

版权

文章标签：

#bootstrap #bootstrap table #bootstrap table 可编辑行 #bootstrap table点击行编辑

于 2018-08-16 15:50:37 首次发布

javascript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用Bootstrap Table插件实现表格行内编辑功能，包括插入、更新数据及获取表格数据的方法，通过实例代码展示了如何利用onClickCell和updateCell方法实现交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图
按照惯例，先放一张图：
这里写图片描述
应用场景
之前的项目也是采用bootstrap table，添加和修改数据都是通过模态框来编辑的，后来有了点击行来编辑和新增的需求，于是乎试试……
html

<div class="table-box" style="margin: 20px;">
	<div id="toolbar">
		<button id="button" class="btn btn-default">insertRow</button>
		<button id="getTableData" class="btn btn-default">getTableData</button>
	</div>
	<table id="table"></table>
</div>

script

$(function() {
	let $table = $('#table');
	let $button = $('#button');
	let $getTableData = $('#getTableData');

	$button.click(function() {
		$table.bootstrapTable('insertRow', {
			index: 0,
			row: {
				id: '',
				name: '',
				price: ''
			}
		});
	});

	$table.bootstrapTable({
		url: 'data2.json',
		toolbar: '#toolbar',
		clickEdit: true,
		showToggle: true,
		pagination: true,		//显示分页条
		showColumns: true,
		showPaginationSwitch: true,		//显示切换分页按钮
		showRefresh: true,		//显示刷新按钮
		//clickToSelect: true,	//点击row选中radio或CheckBox
		columns: [{
			checkbox: true
		}, {
			field: 'id',
			title: 'Item ID'
		}, {
			field: 'name',
			title: 'Item Name'
		}, {
			field: 'price',
			title: 'Item Price'
		}, ],
		/**
		 * @param {点击列的 field 名称} field
		 * @param {点击列的 value 值} value
		 * @param {点击列的整行数据} row
		 * @param {td 元素} $element
		 */
		onClickCell: function(field, value, row, $element) {
			$element.attr('contenteditable', true);
			$element.blur(function() {
				let index = $element.parent().data('index');
				let tdValue = $element.html();
				
				saveData(index, field, tdValue);
			})
		}
	});

	$getTableData.click(function() {
		alert(JSON.stringify($table.bootstrapTable('getData')));
	});

	function saveData(index, field, value) {
		$table.bootstrapTable('updateCell', {
			index: index,		//行索引
			field: field,		//列名
			value: value		//cell值
		})
	}
	
});

实现原理
通过bootstrap table自带的 onClickCell 方法，点击 td 添加 contenteditable 属性(ps: 使元素可编辑),于是 td 元素具有了类似于文本框的 focus 和 blur 事件，用户点击 td 获取焦点，编辑完内容失去焦点后，调用 updateCell方法更新单元格数据。
引入

	<link rel="stylesheet" type="text/css" href="js/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="js/bootstrap-table/1.12.1/bootstrap-table.min.css" />
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap-table/1.12.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>

json

[
	{ "id": 1, "name": "Item 1", "price": "￥1" },
	{ "id": 2, "name": "Item 2", "price": "￥2" },
	{ "id": 3, "name": "Item 3", "price": "￥3" }
]