jQuery實現(xiàn)可編輯的表格實例講解(2)
本文實例為大家分享了jQuery實現(xiàn)可編輯表格的具體代碼,供大家參考,具體內(nèi)容如下
我們最終要達到的效果如下:
當單擊學號列的時候,可以進行編輯:
當單擊ESC的時候,操作取消,當單擊回車的時候,修改生效(沒有與后臺交互)
頁面代碼如下(asp.net):
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EditTable.aspx.cs" Inherits="EditTable" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="css/eidtTable.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="js/eidtTable.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div> <table> <thead> <tr> <th colspan="2">可編輯的表格</th> </tr> </thead> <tbody> <tr> <th>學號</th> <th>姓名</th> </tr> <tr> <td class="editTd">00001</td> <td>小明</td> </tr> <tr> <td class="editTd">00001</td> <td>小明</td> </tr> <tr> <td class="editTd">00001</td> <td>小明</td> </tr> <tr> <td class="editTd">00001</td> <td>小明</td> </tr> </tbody> </table> </div> </form> </body> </html>
CSS(eidtTable.css)
table { border:1px solid black; border-collapse:collapse; width:500px; } table th { border:1px solid black; width:50%; } table td { border:1px solid black; width:50px; } tbody th { background-color:#A3BAE9 }
JS(eidtTable.js):
/// <reference path="jquery-1.9.1.min.js" /> //$(document).ready(function () { // alert('test'); //}); //簡便的寫法 $(function () { $("tr:odd").css("background-color", "#ECE9D8"); var objTd = $(".editTd"); objTd.click(function () { var text = $(this).html(); var objThisTd = $(this); //解決點擊文本框和td中間的空隙還是會出問題 這個問題 if (objThisTd.children("input").length > 0) { return false; } var inputText = $("<input value='test' type='text'/>"); inputText.width(objTd.width()).css("font-size", "16px").css("background-color", objTd.css("background-color")).css("border-width", "0").val(text); objThisTd.html(""); inputText.appendTo(objThisTd); inputText.trigger("focus").trigger("select"); inputText.click(function () { return false; }); //這里采用的keydown事件,我試過用keyup事件無法屏蔽瀏覽器的回車頁面提交事件 inputText.keydown(function (event) { //alert(event.keyCode); var keycode = event.which; if (keycode == 13) { objThisTd.html($(this).val()); //return false; } if (keycode == 27) { objThisTd.html(text); } }); }); });
以上就是實現(xiàn)可編輯的表格全部代碼,希望大家可以仔細研究,應用到自己的網(wǎng)站上。
- jQuery實現(xiàn)的可編輯表格完整實例
- 基于Bootstrap使用jQuery實現(xiàn)簡單可編輯表格
- BootStrap和jQuery相結合實現(xiàn)可編輯表格
- jQuery+PHP實現(xiàn)可編輯表格字段內(nèi)容并實時保存
- 基于JQuery制作可編輯的表格特效
- jQuery(非HTML5)可編輯表格實現(xiàn)代碼
- 基于PHP+Jquery制作的可編輯的表格的代碼
- jquery學習筆記二 實現(xiàn)可編輯的表格
- 用Jquery實現(xiàn)可編輯表格并用AJAX提交到服務器修改數(shù)據(jù)
- jQuery一步一步實現(xiàn)跨瀏覽器的可編輯表格,支持IE、Firefox、Safari、Chrome、Opera
- jQuery實現(xiàn)可以編輯的表格實例詳解【附demo源碼下載】
相關文章
詳解jQuery向動態(tài)生成的內(nèi)容添加事件響應jQuery live()方法
這篇文章主要介紹了jQuery向動態(tài)生成的內(nèi)容添加事件響應jQuery live()方法,需要的朋友可以參考下2015-11-11jQuery結合PHP+MySQL實現(xiàn)二級聯(lián)動下拉列表[實例]
二級聯(lián)動的實現(xiàn)方法還真不少,實用性也很強,這里結合一個學生信息表的實例,來分享一下我的實現(xiàn)過程2011-11-11jQuery探測位置的提示彈窗(toolTip box)詳細解析
提示彈窗(toolTip box)經(jīng)常會被用到,但是本文總要的不是彈,也不是窗,而是探測位置,在適當?shù)牡胤綇棿?。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11得到jQuery detach()后節(jié)點中的某個值實現(xiàn)代碼
需要jQuery -detach 后的dom 結構或某個值,如何獲取到呢?一直困惑著我們,不過本文將為大家解開疑惑,感興趣的朋友可以了解下,或許本文對你有所幫助2013-02-02JQuery 構建客戶/服務分離的鏈接模型中Table分頁代碼效率初探
JQuery構建客戶/服務分離的鏈接模型中Table分頁代碼效率初探!2010-01-01