點選文字變成輸入框
阿新 • • 發佈：2020-09-15
<!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>