bootstrap-table行内編集の簡単な実現

$('#table').bootstrapTable({
    url: createUrl(''),
    striped: true,
    uniqueId: 'attrValue',
    columns: [{
        title: 'ID',
        field: 'index',
        formatter: formatterIndex
    },{
        title: ' ',
        field: 'attrValue',
        class: 'editable'
    },{
        title: ' ',
        field: 'sellPrice',
        class: 'editable'
    },{
        title: ' ',
        field: 'operate',
        formatter: formatterOperate
    }]
});
function formatterIndex(value, row, index){
    var i = index + 1;
    if(i < 10){
        return "0" + i;
    }else{
        return i;
    }
}
function formatterOperate(value, row, index){
    return "      ";
}
$("#addBtn").click(function(){
    var data = {
        attrValue: '',
        sellPrice: ''
    };
    $("#table").bootstrapTable('append', data);
    $("#table tr:last-child td.editable").each(function(){
        $(this).html("");
    });
});
function saveRow(index, value){
    var obj = $("#table tr:nth-child("+ (index+1) +") td.editable");
    var attrValue = obj.first().find("input").val().trim();
    var sellPrice = obj.last().find("input").val().trim();
    var newData = {
        attrValue: attrValue,
        sellPrice: sellPrice
    };
    $("#table").bootstrapTable('updateRow', {
        index: index,
        row: newData
    });
    obj.find("input").remove();
}
function editRow(index){
    $("#table tr:nth-child("+ (index+1) +") td.editable").each(function(){
        var value = $(this).text();
        $(this).html("");
    });
}
function delRow(value){
    $("#table").bootstrapTable('removeByUniqueId', value);
}