bootstrap-table inline editing

1. File import

 <link rel="stylesheet" href="bootstrap.css">
 <link rel="stylesheet" href="bootstrap-table.css">
 <link rel="stylesheet" href="bootstrap3-editable/css/bootstrap-editable.css">
 <script src="jquery2.1.4.js"></script>
 <script src="bootstrap.js"></script>
 <script src="bootstrap-table.js"></script>
 <script src="bootstrap-table-editable.js"></script>
 <script src="bootstrap3-editable/js/bootstrap-editable.js"></script>
 <script src="bootstrap-table-zh-CN.js"></script>

2. Content code

<table id="table"></table>
<script>
    $("#table").bootstrapTable({
        toolbar: "#toolbar",
        striped: true , // whether to display line interval color 
        height: 300 ,
        sortable: false , // whether to sort 
        search: true , // whether to display table search, this search is client-side search, will not enter the server 
        strictSearch: true , // whether to display refresh 
        showColumns: true , // whether to display all Column 
        showRefresh: true , // whether to display the refresh button 
        minimumCountColumns: 2 , // minimum allowed number of columns 
        showToggle: true , // whether to display the toggle button between the detailed view and the list view 
        cardView: false , // whether to display the detailed view
        columns: [{
            field: 'id',
            title: 'Item ID',
            editable: true   // editable column 
        }, {
            field: 'name',
            title: 'Item Name',
            editable: true    // editable column 
        }, {
            field: 'price',
            title: 'Item Price',
            editable: true  // edit column 
        }],
 //         data can be replaced with url 
        data: [{
            id: 1,
            name: 'Item 1',
            price: '$1'
        }, {
            id: 2,
            name: 'Item 2',
            price: '$2'
        }, {
            id: 3,
            name: 'Item 3',
            price: '$3'
        }, {
            id: 4,
            name: 'Item 4',
            price: '$4'
        }, {
            id: 5,
            name: 'Item 5',
            price: '$5'
        }, {
            id: 6,
            name: 'Item 6',
            price: '$6'
        }, {
            id: 7,
            name: 'Item 7',
            price: '$7'
        }, {
            id: 8,
            name: 'Item 8',
            price: '$8'
        }, {
            id: 9,
            name: 'Item 9',
            price: '$9'
        }, {
            id: 10,
            name: 'Item 10',
            price: '$10'
        }]
    })
</script>

Show results

3. Download address

　　bootstrap3-editable：https://github.com/vitalets/x-editable