bootstrap-table官網上有editable和click-edit-row的例子，但是前者通過設定表格中某一列是否可編輯屬性來控制行內編輯，會給可編輯的單元格新增格外的樣式，且每編輯一個單元格就要點選一次確認或取消按鈕。後者通過設同時置表格整體是否可編輯和某一列的編輯控制元件型別（input，select）來實現，可以完成一行編輯後再提交，點選表格行的任意位置都可以編輯，會在最後一列追加儲存和取消按鈕，會影響表格的樣式。現在的需求時點選表格最後一列中的編輯按鈕來控制這一行是否可編輯，最後一列不是追加按鈕，而是用儲存/取消按鈕替代原型的編輯/取消按鈕。顯然官網上實現的編輯功能都不能滿足這個需求。click-edit-row的例子與我需要實現的需求更接近，於是在這個檔案上稍作修改以實現我的需求。
下面是實現後的效果圖

1. 縮小click監聽事件元素的範圍

 table.on('click-row.bs.table', function (e, row, $element, field) {
        if(field ==='no') return; //|| field ==='noOld'
        this.$data.thId = $element.data().index;
        this.$data.itemid = $element.data().uniqueid;
        this
 
.$data.divi = parseInt(row.area);
        this.$data.town=parseInt(row.town);
        clikcToEdit(this, $element);
    }.bind(this));

改寫為

table.on('click','.btnEdit', function(e) {
//btnEdit是編輯按鈕的樣式，因為這裡的行資料是動態新增的，所以不能直接繫結click事件，使用委託效能也更好。
    var $btn = e.target.nodeName == "BUTTON" ? $(e.target) : $(e.target.closest('button'
 
));
    var $tr = $btn.closest('tr');
    this.$data.thId = $tr.data().index; //thId表示更新行資料的索引
    clikcToEdit(this, $tr);
    //e.stopImmediatePropagation(); //立即終止事件在元素樹中的流動。如果使用select2元件美化下拉框，最好加上此句，因為這裡的程式碼總會執行2次。               
}.bind(this));

2.修改clickToEdit函式
首先將原來的按鈕隱藏 tarNode.find('button').hide();
編輯完成重新整理這行後（updateRow）再顯示原來的按鈕
tarNode.find('button').show();
效果如圖1和圖2所示。
將單元格的文字節點和元素節點可以通過按鈕切換的原理：
編輯時執行

    table.columns.forEach(function(column, i){
        if (!column.editable) return;
           switch(column.editable){
                case 'input':
                    var div=$('<div class="editable-input col-md-12 col-sm-12 col-xs-12" style="position: relative;"/>');
                    txt.push(tarNode.find('td').eq(column.fieldIndex).text());
                    div.append($('<input type="text" class="form-control input-sm"/>'));
                    div.append($('<span class="clear"><i class="fa fa-times-circle-o" aria-hidden="true"></i></span>'));
                    tarNode.find('td').eq(column.fieldIndex).text('').append(div);
                    break;
                case 'select':
                    var select=$('<select id="'+column.field+'">'), options = $.selectArray[column.field];
                    tarNode.find('td').eq(column.fieldIndex).text('').append(select);
                    setDivision($('#'+column.field), options);
                    break;
                case 'textarea':
                    break;
                default:
                    console.log(column.fieldIndex+' '+column.editable);
            }
        }, evt);

編輯完後執行

         $('#table').bootstrapTable('updateRow', {//此方法執行後單元格內值剩下文字節點
                index: table.$data.thId,
                row: {
                    noOld: txt[0],
                    area: tarNode.find('select').eq(0).children(':selected').text(),
                    town: tarNode.find('select').eq(1).children(':selected').text(),
                    address: txt[1]
                }
            });