JavaScript實現可編輯的表格
阿新 • • 發佈:2019-01-12
一、建立js檔案(JavaScript檔案)
/* * 建立人:張興軍 * 說明:可編輯的表格 */ $(function () { // 相當於在頁面中的body標籤加上onload事件 $(".caname").click(function () { // 給頁面中有caname類的標籤加上click函式 var objTD = $(this); var oldText = $.trim(objTD.text()); // 儲存老的類別名稱 var input = $("<input type='text' value='" + oldText + "' />"); // 文字框的HTML程式碼 objTD.html(input); // 當前td的內容變為文字框 // 設定文字框的點選事件失效 input.click(function () { return false; }); // 設定文字框的樣式 input.css("border-width", "0px"); //邊框為0 input.height(objTD.height()); //文字框的高度為當前td單元格的高度 input.width(objTD.width()); // 寬度為當前td單元格的寬度 input.css("font-size", "14px"); // 文字框的內容文字大小為14px input.css("text-align", "center"); // 文字居中 input.trigger("focus").trigger("select"); // 全選 // 文字框失去焦點時重新變為文字 input.blur(function () { var newText = $(this).val(); // 修改後的名稱 var input_blur = $(this); // 當老的類別名稱與修改後的名稱不同的時候才進行資料的提交操作 if (oldText != newText) { // 獲取該類別名所對應的ID(序號) var caid = $.trim(objTD.prev().text()); // AJAX非同步更改資料庫 var url = "../handler/ChangeCaName.ashx?caname=" + encodeURI(encodeURI(newText)) + "&caid=" + caid + "&t=" + new Date().getTime(); $.get(url, function (data) { if (data == "false") { $("#test").text("類別修改失敗,請檢查是否類別名稱重複!"); input_blur.trigger("focus").trigger("select"); // 文字框全選 } else { $("#test").text(""); objTD.html(newText); } }); } else { // 前後文本一致,把文字框變成標籤 objTD.html(newText); } }); // 在文字框中按下鍵盤某鍵 input.keydown(function (event) { var jianzhi = event.keyCode; var input_keydown = $(this); switch (jianzhi) { case 13: // 按下回車鍵 ,把修改後的值提交到資料庫 // $("#test").text("您按下的鍵值是: " + jianzhi); var newText = input_keydown.val(); // 修改後的名稱 // 當老的類別名稱與修改後的名稱不同的時候才進行資料的提交操作 if (oldText != newText) { // 獲取該類別名所對應的ID(序號) var caid = $.trim(objTD.prev().text()); // AJAX非同步更改資料庫 var url = "../handler/ChangeCaName.ashx?caname=" + encodeURI(encodeURI(newText)) + "&caid=" + caid + "&t=" + new Date().getTime(); $.get(url, function (data) { if (data == "false") { $("#test").text("類別修改失敗,請檢查是否類別名稱重複!"); input_keydown.trigger("focus").trigger("select"); // 文字框全選 } else { $("#test").text(""); objTD.html(newText); } }); } else { // 前後文本一致,把文字框變成標籤 objTD.html(newText); } break; case 27: // 按下Esc鍵, 取消修改,把文字框變成標籤 $("#test").text(""); objTD.html(oldText); break; } }); }); }); //遮蔽回車鍵 $(document).keydown(function (event) { switch (event.keyCode) { case 13: return false; } });
二、使用
<asp:Repeater ID="repCategory" runat="server"> <ItemTemplate> <tr> <td> <%# Eval("id")%> </td> <td class="caname"> <%# Eval("name")%> </td> <td> <asp:LinkButton ID="lbtnDelCa" runat="server" CommandArgument='<%# Eval("id")%>' OnClientClick="return confirm('刪除類別會使其下新聞及評論全部刪除,是否真的刪除?')" OnClick="lbtnDelCa_Click">刪除</asp:LinkButton> </td> </tr> </ItemTemplate> </asp:Repeater>
呼叫 <td class="caname">
<%# Eval("name")%>
</td>