壹咪陽(yáng)光

隨筆-124 評(píng)論-49 文章-56 trackbacks-0

可編輯的表格

1腳本jqueryedit.js

//在頁(yè)面裝載時(shí)，讓所有的td都有一個(gè)點(diǎn)擊事件

$(document)ready(function(){

//找到所有的td節(jié)點(diǎn)

var tds=$("td");

//給所有的td節(jié)點(diǎn)增加點(diǎn)擊事伯

tds.click(function(){

//0保存當(dāng)前的td節(jié)點(diǎn)

var td=$(this);

//1取出td里面的內(nèi)容

var text=td.text();

//2清空td里面的內(nèi)容

td.html("");//也可以用td.empty();

//3建立一個(gè)文本框，也就是input的元素節(jié)點(diǎn)

var input=$("<input>");

//4設(shè)置文本框的值是保存起來的文本內(nèi)容

input.attr("value",text);//設(shè)置屬性值

//4.5讓文本框可以響應(yīng)鍵盤按下事件，主要用于處理回車確認(rèn)

input.keyup(function(event){

0.獲取當(dāng)前用戶按下的鍵值

var myEvent=event||window.event;

var kcode=myEvent.keyCode;

1.判斷是否是回車按下

if(kcode==13){

var inputnode=${this};

//2.保存當(dāng)前文本框的內(nèi)容

var inputtext=inputnode.val();

//3.清空td里面的肉容

var tdNode=inputnode.parent();

//4.將保存的文本框的空容填充到td中

tdNode.html(inputtext);

//5.讓td重新?lián)碛悬c(diǎn)擊事件

tdNode.click();

}

});

//5將文本框加入到td中

td.append(input);//也可以用input.appendTo(td);加添節(jié)點(diǎn)

//5.5讓文本框里面的文字被高亮選中

//需要將jquery的對(duì)象轉(zhuǎn)換成dom對(duì)象

var inputdom=input.get(0);

inputdom.select();

//6移除點(diǎn)擊事件

td.unbind("click");

});

2頁(yè)面jqueryEdit.html

<html>

<head>

<head>

<body>

<tr>

</tr>

</table>

</body>

</html>

posted on 2009-11-03 10:23 junly 閱讀(216) 評(píng)論(0) 編輯收藏所屬分類: ajax/jquery/js

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: Useing Jquery With JSF js巧用qq接口得到當(dāng)前IP jquery radio取值，checkbox取值，select取值，radio選中，checkbox選中，select選中 jQuery-強(qiáng)大的jQuery選擇器 (詳解)[轉(zhuǎn)] 給Dreamweaver安裝jQuery插件jQuery_API.mxp ajax 書簽 LavaLamp mean 事件顯示聲明 javascript語(yǔ)法_函數(shù)_對(duì)象_數(shù)組 javascript DOM