x-editable教程
http://www.cnblogs.com/landeanfen/p/5821192.html
http://vitalets.github.io/x-editable/docs.html#editable
http://vitalets.github.io/x-editable/demo-bs3.html?c=popup
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap_table/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap_table/css/bootstrap-table.min.css">
<link rel="stylesheet" href="bootstrap_table/css/bootstrap-editable.css">
<!--<link rel="stylesheet" href="bootstrap_table/css/bootstrap-table.css">-->
<script src="bootstrap_table/js/jquery.min.js"></script>
<script src="bootstrap_table/js/bootstrap.min.js"></script>
<script src="bootstrap_table/js/bootstrap-table.min.js"></script>
<script src="bootstrap_table/js/bootstrap-editable.js"></script>
<script src="bootstrap_table/js/bootstrap-table-editable.js"></script>
<!--<script src="bootstrap_table/js/bootstrap-table.js"></script>-->
<!--<script src="bootstrap_table/js/bootstrap-table-zh-CN.min.js"></script>-->
<meta charset="UTF-8">
<title></title>
<style>
.test {
background-color: red;
width: 50px;
height: 20px;
}
#test {
background-color: red;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div>
<button type="button" class="btn btn-default" id="btn-action">按钮</button>
</div>
<table id="table">
</table>
<a href="#" id="username">用户名</a>
<input type="text" value="test" class="test"/>
</body>
<script>
$(function() {
$('#username').editable({
type: "text", //编辑框的类型。支持text|textarea|select|date|checklist等
// title: "用户名", //编辑框的标题
disabled: false, //是否禁用编辑
emptytext: "空文本", //空值的默认文本
mode: "inline", //编辑框的模式：支持popup和inline两种模式，默认是popup
placement:'bottom',
validate: function(value) { //字段验证
if(!$.trim(value)) {
return '不能为空';
}
}
});
});
</script>
</html>