點擊文本變成輸入框

本文轉載自查看原文 2020-09-15 16:31 704 代碼

<!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="jquery-1.12.4.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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js實現點擊增加文本輸入框實現鼠標雙擊表格時，文本框變成輸入框進行編輯富文本輸入框 iview 帶Icon的輸入框點擊事件 Flask 使用富文本輸入框 android開發_文本按鈕與輸入框 WPF 帶有watermark的文本輸入框 html 文本輸入框效果大匯集 jQuery 判斷文本輸入框的事件文本框限制輸入類型的輸入框