bootstrap table自定义新增行

.deleattrbtn,.addtrbtn{
    width: 60px;
    color: #fff;
    font-size: 12px;
    background-color: #3177E7;
    border-radius: 2px;
    border: 0;
}

#addtrdiv,#back_addtrdiv{
    margin: 10px 22px;
    text-align: right;
}

.table-bordered{
    table-layout: fixed;
    font-size: 12px;
}

.table th, .table td{
    padding: 5px;
    height: 30px;
}

td{    
    height: 2.5rem;  
}

.styinp{
    border: 1px solid #e10000;    
    height: 1.55rem;    
    line-height: 1.55rem;    
    padding-left: 0.4rem;    
    width: 100%;    
    box-sizing: border-box;    
    background: transparent; 
    outline: none;
}

<!--region 添加离深行程-->
                        <div class="tbdiv">
                            <div id="addtrdiv">
                                <button type="button" class="addtrbtn" onclick="addtr()">添加行程</button>
                            </div>
    
                            <table class="table table-bordered" id="para_table" border="1">
                                <thead>
                                    <tr>
                                        <th style="text-align:center">离深时间</th>
                                        <th style="text-align:center">离深目的地</th>
                                        <th style="text-align:center">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td style="text-align:center" onclick="tdclick(this)"></td>
                                        <td style="text-align:center" onclick="tdclick(this)"></td>
                                        <td style="text-align:center" onclick="deletetr(this)"><button type="button" class="deleattrbtn">删除</button></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <script type="text/javascript"> 
                            function save_para_table(){ 
                              var tableinfo = gettableinfo();
                            } 
                            //get table infomation 
                            function gettableinfo(){ 
                              var key = ""; 
                              var value = ""; 
                              var tabledata = ""; 
                              var table = $("#para_table"); 
                              var tbody = table.children(); 
                              var trs = tbody.children(); 
                              for(var i=1;i<trs.length;i++){ 
                                var tds = trs.eq(i).children(); 
                                for(var j=0;j<tds.length;j++){ 
                                  if(j==0){ 
                                    if(tds.eq(j).text()==null||tds.eq(j).text()==""){ 
                                      return null; 
                                    } 
                                    key = "key\":\""+tds.eq(j).text(); 
                                  } 
                                  if(j==1){ 
                                    if(tds.eq(j).text()==null||tds.eq(j).text()==""){ 
                                      return null; 
                                    } 
                                    value = "value\":\""+tds.eq(j).text(); 
                                  } 
                                } 
                                if(i==trs.length-1){ 
                                  tabledata += "{\""+key+"\",\""+value+"\"}"; 
                                }else{ 
                                  tabledata += "{\""+key+"\",\""+value+"\"},"; 
                                } 
                              } 
                              tabledata = "["+tabledata+"]"; 
                              return tabledata; 
                            } 
                            
                            function tdclick(tdobject){ 
                              var td=$(tdobject); 
                              td.attr("onclick", ""); 
                              //1,取出当前td中的文本内容保存起来 
                              var text=td.text(); 
                              //2,清空td里面的内容 
                              td.html(""); //也可以用td.empty(); 
                              //3，建立一个文本框，也就是input的元素节点 
                              var input=$("<input class='styinp'>"); 
                              //4，设置文本框的值是保存起来的文本内容 
                              input.attr("value",text); 
                              input.bind("blur",function(){ 
                                var inputnode=$(this); 
                                var inputtext=inputnode.val(); 
                                var tdNode=inputnode.parent(); 
                                tdNode.html(inputtext); 
                                tdNode.click(tdclick); 
                                td.attr("onclick", "tdclick(this)"); 
                              }); 
                              input.keyup(function(event){ 
                                var myEvent =event||window.event; 
                                var kcode=myEvent.keyCode; 
                                if(kcode==13){ 
                                  var inputnode=$(this); 
                                  var inputtext=inputnode.val(); 
                                  var tdNode=inputnode.parent(); 
                                  tdNode.html(inputtext); 
                                  tdNode.click(tdclick); 
                                } 
                              }); 
                            
                              //5，将文本框加入到td中 
                              td.append(input); 
                              var t =input.val(); 
                              input.val("").focus().val(t); 
                            //       input.focus(); 
                            
                              //6,清除点击事件 
                              td.unbind("click"); 
                            }
                            var row=0; 
                            function addtr(){ 
                              if(row<8){
                              row++;
                              var table = $("#para_table"); 
                              var tr= $("<tr>" + 
                                "<td style='text-align: center;' οnclick='tdclick(this)'>"+"</td>" + 
                                "<td style='text-align: center;' οnclick='tdclick(this)'>"+"</td>" + 
                                "<td align='center' οnclick='deletetr(this)'><button type='button' class='deleattrbtn' >"+"删除"+"</button></td></tr>"); 
                              table.append(tr); 
                              }else{
                                alert("不能增加更多行程");
                              }
                            } 
                            function deletetr(tdobject){
                              row--;
                              var td=$(tdobject); 
                              td.parents("tr").remove(); 
                            }
                            
                            </script>
                    
                        <!--endregion-->