bootstrap table里输入框实现功能_bootstraptable input-优快云博客

本文介绍如何在BootstrapTable中使用输入框进行数据编辑，通过设置editable属性和formatter函数实现单元格内的文本输入，并通过按钮触发更新操作。

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

在bootstrap table表格里需要用到输入框来做一个添加或修改的操作以前做项目都是直接选择那一行进行操作后来去网上查了一下下面写一个简单的表格输入框实现功能。

在一列的属性里用formatter方法放输入框后面接着是操作

,{
			field : 'pla_result',title : '执行效果',align : 'center',valign : 'middle',
			editable : {
				 type : 'text',//数据显示在文本框内
		},
				 formatter : function(value, row, index) {
						return "<input type='text' name='pla_result' id='pla_result'>";
					}
		},{
			title : '操作',align : 'center',valign : 'middle',
			formatter : function(value, row, index) {
				return "<button type='button' class='btn btn-success' onclick='updateresult("+row.pla_id+")'>保存</button>";
			}
		}],

当你想执行哪一行就点击按钮会拿到那一行进行方法的操作要传一个id 好知道你要选择的里面传输入框的值然后就执行这个方法里面的逻辑

//添加执行结果
function updateresult(pla_id){
	var pla_result=$('#pla_result').val();//拿到输入框值 传过去
		$.post($("#pro").val()+"/sy/opportunitiesAction_updateresult.action",{"pla_id" : pla_id,"pla_result":pla_result//传拿到的那个id
		},function(data) {//ps里值一起放进去
					if (data) {//拿到数据
						alert("添加成功");
					} else {
						alert("添加失败");
					}
				});
}

这样就能在table输入框里得到值。