//---------------------------------------html

 <table class="table  table-bordered" id="para_table">

        <tr>
            <th style="text-align:center" width="200">名稱</th>
            <th style="text-align:center" width="200">值</th>
            <th style="text-align:center" width="100">操作</th>
        </tr>
        <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="btn btn-xs btn-link">刪除</button>
            </td>
        </tr>
    </table>


    <div id="addtrdiv" style="margin-top:-15px; width: 15%; float: right;">
        <button type="button" class="btn btn-xs btn-link" onclick="addtr()">新增</button>

    </div>  

//------------------js
    function save_para_table() {


        var tableinfo = gettableinfo();
        alert(tableinfo);




    }
    //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>");
        //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");
    }
    function addtr() {
        var table = $("#para_table");
        var tr = $("<tr>" +
            "<td  onclick='tdclick(this)'>" + "</td>" +
            "<td  onclick='tdclick(this)'>" + "</td>" +
            "<td  align='center' onclick='deletetr(this)'><button type='button'  class='btn btn-xs btn-link' >" + "刪除" + "</button></td></tr>");
        table.append(tr);
    }
    function deletetr(tdobject) {
        var td = $(tdobject);
        td.parents("tr").remove();
    }