<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <table id="MyTable" cellspacing="1" cellpadding="3">
        <tr style="text-align: left;">
            <td width="70" height="40" id="OrderName">
                订单名称：
            </td>
            <td colspan="5" class="caname" id="OrderName1">
                第三方第三方士大夫大幅度
            </td>
        </tr>
        <tr style="text-align: left;">
            <td width="70" height="40" id="ID_Product">
                产品类型:
            </td>
            <td class="caname" id="ID_Product1">
                2134fSDFDGDS
            </td>
        </tr>
        <tr style="text-align: left;"></tr>
        <td width="40" id="OrderState_Send">
            状态:
        </td>
        <td class="caname" id="OrderState_Send1">true
        </td>
        </tr>
        <tr style="text-align: left;"></tr>
        <td width="40" id="OrderQty">
            印量:
        </td>
        <td class="caname" id="OrderQty1">1111111
        </td>
        </tr>
        <tr>
            <td width="70" height="60" id="SendAddress">
                收货信息:
            </td>
            <td colspan="5" class="caname" id="SendAddress1">dfsdfds
            </td>
        </tr>
        <tr style="text-align: left;">
            <td width="70" height="50" id="OrderMoney_Total">
                总金额:
            </td>
            <td colspan="5" class="caname" id="OrderMoney_Total1">145432123
            </td>
        </tr>
    </table>
    <script src="https://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>
    <script>
        //获取class为caname的元素
        $("#MyTable").on('click', 'tr > .caname', function () {
            // 获取当前点击的元素
            var td = $(this);
            // 获取当前元素的内容
            var txt = $.trim(td.text());
            // 把获取到的内容添加到 input 的 value 中
            var input = $("<input type='text'value='" + txt + "'/>");
            // 把 input 放到 元素中
            td.html(input);
            input.click(function () { return false; });
            //获取焦点
            input.trigger("focus");
            //文本框失去焦点后提交内容，重新变为文本
            input.blur(function () {
                var newtxt = $(this).val();
                //判断文本有没有修改
                if (newtxt != txt) {
                    td.html(newtxt);
                }
            })
        })
    </script>
</body>

</html>