jQuery實(shí)現(xiàn)可編輯的表格實(shí)例講解(2)
本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)可編輯表格的具體代碼,供大家參考,具體內(nèi)容如下
我們最終要達(dá)到的效果如下:
當(dāng)單擊學(xué)號列的時(shí)候,可以進(jìn)行編輯:
當(dāng)單擊ESC的時(shí)候,操作取消,當(dāng)單擊回車的時(shí)候,修改生效(沒有與后臺交互)
頁面代碼如下(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>學(xué)號</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); //解決點(diǎn)擊文本框和td中間的空隙還是會(huì)出問題 這個(gè)問題 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); } }); }); });
以上就是實(shí)現(xiàn)可編輯的表格全部代碼,希望大家可以仔細(xì)研究,應(yīng)用到自己的網(wǎng)站上。
- jQuery實(shí)現(xiàn)的可編輯表格完整實(shí)例
- 基于Bootstrap使用jQuery實(shí)現(xiàn)簡單可編輯表格
- BootStrap和jQuery相結(jié)合實(shí)現(xiàn)可編輯表格
- jQuery+PHP實(shí)現(xiàn)可編輯表格字段內(nèi)容并實(shí)時(shí)保存
- 基于JQuery制作可編輯的表格特效
- jQuery(非HTML5)可編輯表格實(shí)現(xiàn)代碼
- 基于PHP+Jquery制作的可編輯的表格的代碼
- jquery學(xué)習(xí)筆記二 實(shí)現(xiàn)可編輯的表格
- 用Jquery實(shí)現(xiàn)可編輯表格并用AJAX提交到服務(wù)器修改數(shù)據(jù)
- jQuery一步一步實(shí)現(xiàn)跨瀏覽器的可編輯表格,支持IE、Firefox、Safari、Chrome、Opera
- jQuery實(shí)現(xiàn)可以編輯的表格實(shí)例詳解【附demo源碼下載】
相關(guān)文章
jquery阻止后續(xù)事件只執(zhí)行第一個(gè)事件
同一個(gè)標(biāo)簽上點(diǎn)擊后有多個(gè)事件,如果只想執(zhí)行第一個(gè)事件而放棄后面的事件該怎么辦呢?event.stopPropagation()可實(shí)現(xiàn)這個(gè)需求2014-07-07jQuery實(shí)現(xiàn)簡單彈出框效果實(shí)例
這篇文章主要給大家介紹了關(guān)于jQuery實(shí)現(xiàn)簡單彈出框效果的相關(guān)資料,幾天一直在研究JQuery,確實(shí)很好用,有很多需求都是要彈出框,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06jQuery實(shí)現(xiàn)鼠標(biāo)跟隨效果
本文主要分享了jQuery實(shí)現(xiàn)鼠標(biāo)跟隨效果的示例代碼。具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02詳解jQuery向動(dòng)態(tài)生成的內(nèi)容添加事件響應(yīng)jQuery live()方法
這篇文章主要介紹了jQuery向動(dòng)態(tài)生成的內(nèi)容添加事件響應(yīng)jQuery live()方法,需要的朋友可以參考下2015-11-11jQuery結(jié)合PHP+MySQL實(shí)現(xiàn)二級聯(lián)動(dòng)下拉列表[實(shí)例]
二級聯(lián)動(dòng)的實(shí)現(xiàn)方法還真不少,實(shí)用性也很強(qiáng),這里結(jié)合一個(gè)學(xué)生信息表的實(shí)例,來分享一下我的實(shí)現(xiàn)過程2011-11-11jQuery探測位置的提示彈窗(toolTip box)詳細(xì)解析
提示彈窗(toolTip box)經(jīng)常會(huì)被用到,但是本文總要的不是彈,也不是窗,而是探測位置,在適當(dāng)?shù)牡胤綇棿?。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11得到j(luò)Query detach()后節(jié)點(diǎn)中的某個(gè)值實(shí)現(xiàn)代碼
需要jQuery -detach 后的dom 結(jié)構(gòu)或某個(gè)值,如何獲取到呢?一直困惑著我們,不過本文將為大家解開疑惑,感興趣的朋友可以了解下,或許本文對你有所幫助2013-02-02JQuery 構(gòu)建客戶/服務(wù)分離的鏈接模型中Table分頁代碼效率初探
JQuery構(gòu)建客戶/服務(wù)分離的鏈接模型中Table分頁代碼效率初探!2010-01-01