前言

网上看了很多基于bootstrap的table表格行内编辑，需要基于bootstrap-table,bootstrap-table-edit,x-editable等插件，写的很复杂。
我想实现的需求很简单，在页面上写个简单的table表格，能删除行，添加行，点击每一个报告能直接编辑就行，不需要那些花里胡哨的功能。
最后还是自己基于bootstrap写了一个table报告的在线编辑功能。

实现效果

想实现的效果如下图所示：

• 1.点输入框能占满一格
• 2.最后一列添加删除按钮
• 3.可以点添加一行按钮

前端实现

基于bootstrap框架

    
    
    
    
    
    


  

    

    

      
add headers
      

        

          
key
          
value
          
操作
        
      
      

        

          

          

          
删除
        
      
    
    
    
  

操作按钮

添加一行按钮实现,简单粗暴直接append添加一行

// 添加一行
$(".add_row").click(function(){
    var $tbody = $(this).parent().parent().find("tbody");
    var tr = [
            '',
            '',
            '',
            '删除',
            ''
    ];
    $tbody.append(tr.toString())

});

删除按钮实现

// 删除一行
$(document).on('click','.del_row', function(){
    $(this).parent().parent().remove();
});

最后提交数据

提交数据需获取table报告上的输入内容，希望是键值对的数据，于是可以用到form表单序列化，在table外层加一个form标签。
使用jquery.serializejson.min.js来序列化表单内容

// 获取数据
$(document).on('click','#save', function(){
    a =  $("#form_table").serializeJSON();
    console.log(JSON.stringify(a))
})

最终实现效果