快捷導(dǎo)航

利用jQuery實(shí)現(xiàn)可以編輯的表格

更新時(shí)間：2014年05月26日 09:28:34 作者：

在前臺(tái)的表格中單擊單元格便可修改其中的內(nèi)容，回車(chē)鍵保存修改的內(nèi)容，esc撤銷(xiāo)保存的內(nèi)容

今天學(xué)習(xí)了利用jQuery實(shí)現(xiàn)可以編輯的表格這個(gè)例子。這個(gè)例子需求是這樣的：在前臺(tái)的表格中單擊單元格便可修改其中的內(nèi)容，回車(chē)鍵保存修改的內(nèi)容，esc撤銷(xiāo)保存的內(nèi)容。原理：?jiǎn)螕艨蛻舳吮砀駟卧駮r(shí)，在單元格中添加一個(gè)文本框，并將單元格中原來(lái)的內(nèi)容賦值給文本框，再進(jìn)一步去修改文本框內(nèi)容，修改后將文本框內(nèi)容重新賦值給單元格。

源碼：

前臺(tái)代碼：

復(fù)制代碼代碼如下:

 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> 
<!DOCTYPE html 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>jq2—可以編輯的表格</title> 
<link href="css/editTable.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/editTable.js"></script> 
<%--<script type="text/javascript" src="js/jquery-1.9.1.js"></script>--%> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<table> 
<thead> 
<tr> 
<th colspan="2">鼠標(biāo)點(diǎn)擊表格項(xiàng)就可以編輯</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th>學(xué)號(hào)</th> 
<th>姓名</th> 
</tr> 
<tr> 
<td>000001</td> 
<td>張三</td> 
</tr> 
<tr> 
<td>000002</td> 
<td>李四</td> 
</tr> 
<tr> 
<td>000003</td> 
<td>王五</td> 
</tr> 
<tr> 
<td>000004</td> 
<td>趙六</td> 
</tr> 
</tbody> 
</table> 
</div> 
</form> 
</body> 
</html> 

css代碼：

復(fù)制代碼代碼如下:

 
body { 
} 
table { 
border:1px solid #000000; 
border-collapse:collapse;/*單元格邊框合并*/ 
width:400px; 
} 
table td { 
border:1px solid #000000; 
width:50%; 
} 
table th { 
border:1px solid #000000; 
width:50%; 
} 
tbody th { 
background-color:#426fae; 
} 

jquery代碼

復(fù)制代碼代碼如下:

 
$(function () { 
//找到表格中除了第一個(gè)tr以外的所有偶數(shù)行 
//使用even為了通過(guò)tbody tr返回所有tr元素 
$("tbody tr:even").css("background-color", "#ece9d8"); 
//找到所有的學(xué)號(hào)單元格 
var numId = $("tbody td:even"); 

//給單元格注冊(cè)鼠標(biāo)點(diǎn)擊事件 
numId.click(function () { 
//找到對(duì)應(yīng)當(dāng)前鼠標(biāo)點(diǎn)擊的td，this對(duì)應(yīng)的就是響應(yīng)了click的那個(gè)td 
var tdObj = $(this); 
//判斷td中是否有文本框 
if (tdObj.children("input").length>0) { 
return false; 
} 
//獲取表格中的內(nèi)容 
var text = tdObj.html(); 
//清空td中的內(nèi)容 
tdObj.html(""); 
//創(chuàng)建文本框 
//去掉文本框的邊框 
//設(shè)置文本框中字體與表格中的文字大小相同。 
//設(shè)置文本框的背景顏色與表格的背景顏色一樣 
//是文本框的寬度和td的寬度相同 
//并將td中值放入文本框中 
//將文本框插入到td中 
var inputObj = $("<input type='text'>").css("border-width", "0").css("font-size", tdObj.css("font-size")).css("background-color", tdObj.css("background-color")).width(tdObj.width()).val(text).appendTo(tdObj); 
//文本框插入后先獲得焦點(diǎn)、后選中 
inputObj.trigger("focus").trigger("select") 
//文本框插入后不能被觸發(fā)單擊事件 
inputObj.click(function () { 
return false; 
}); 
//處理文本框上回車(chē)和esc按鍵的操作 
inputObj.keyup(function (event) { 
//獲取當(dāng)前按下鍵盤(pán)的鍵值 
var keycode = event.which; 
//處理回車(chē)的情況 
if (keycode==13) { 
//獲取當(dāng)前文本框中的內(nèi)容 
var inputtext = $(this).val(); 
//將td中的內(nèi)容修改為文本框的內(nèi)容 
tdObj.html(inputtext); 
} 
//處理esc的內(nèi)容 
if (keycode==27) { 
//將td中的內(nèi)容還原成原來(lái)的內(nèi)容 
tdObj.html(text); 
} 
}); 
}); 
}); 

總結(jié)：通過(guò)這一實(shí)例的學(xué)習(xí)能獲得的知識(shí)點(diǎn)：

一、html方面

1.table中可以包含thead和tbody

2.表頭的內(nèi)容中可以放th中

3.table{}這種寫(xiě)法稱(chēng)作標(biāo)簽選擇器，可以對(duì)整個(gè)table產(chǎn)生影響。

4.table td{}這種寫(xiě)法表示table中包含的所有td。

二、jquery方面

$()的括號(hào)中可以放4種不同的參數(shù)

1.參數(shù)直接放function,表示頁(yè)面加載完畢：例如上述例子中jquery代碼中的第1行$(function(){})

2.參數(shù)可以是css類(lèi)選擇器，并被包裝成一個(gè)jquery對(duì)象。例如：上述例子中jquery代碼的第4行$(“tbody tr:even”)

3.參數(shù)如果是html文本，可以創(chuàng)建dom節(jié)點(diǎn)，并包裝成jquery對(duì)象。例如：上述例子中jquery代碼的第27行$("<input type='text'>")

4.參數(shù)可以是一個(gè)dom對(duì)象，這個(gè)方法相當(dāng)于吧dom對(duì)象裝換成jquery對(duì)象。上述例子中jquery代碼的第11行var tdObj = $(this)

本例子中的jquery對(duì)象

1.jquery對(duì)象后面加css屬性，可以設(shè)置節(jié)點(diǎn)的css屬性。例如上述例子中jquery代碼中的第4行$("tbody tr:even").css("background-color", "#ece9d8");

2.jquery對(duì)象內(nèi)容中包含了選擇器對(duì)應(yīng)的dom節(jié)點(diǎn)，以數(shù)組保存。

3.jquery對(duì)象后面加html方法可以設(shè)置或獲取節(jié)點(diǎn)的html內(nèi)容。例如上述例子中jquery代碼中的第17行var text = tdObj.html()

4.jquery對(duì)象后面加val方法，可以獲取或設(shè)置節(jié)點(diǎn)的value值。例如上述例子中jquery代碼中第41行var inputtext = $(this).val()

5.jquery對(duì)象后面加width方法,可以設(shè)置或獲取某個(gè)節(jié)點(diǎn)的寬度。例如上述例子中jquery代碼中第27行tdObj.width()

6.jquery對(duì)象后面加apppendTo方法可以將一個(gè)節(jié)點(diǎn)追加到另一個(gè)節(jié)點(diǎn)所有子節(jié)點(diǎn)后面。例如上述例子中jquery代碼中第27行appendTo(tdObj)

7.jquery對(duì)象后面加trigger方法可以出發(fā)某個(gè)js事件發(fā)生。例如上述例子中jquery代碼中第29行inputObj.trigger("focus").trigger("select")

8.jquery對(duì)象后面加children方法可以獲得某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)，可以制定參數(shù)來(lái)限制子節(jié)點(diǎn)的內(nèi)容。例如上述例子中jquery代碼中第13行tdObj.children("input").length

9.如果選擇器返回的jquery對(duì)象中包含多個(gè)dom節(jié)點(diǎn)，在這個(gè)對(duì)象上注冊(cè)類(lèi)似click事件，所有dom節(jié)點(diǎn)都會(huì)用于此事件。例如上述例子中jquery代碼中第9行numId.click；

您可能感興趣的文章: