今天學習了利用jQuery實現可以編輯的表格這個例子。這個例子需求是這樣的：在前台的表格中單擊單元格便可修改其中的內容，回車鍵保存修改的內容，esc撤銷保存的內容。原理：單擊客戶端表格單元格時，在單元格中添加一個文本框，並將單元格中原來的內容賦值給文本框，再進一步去修改文本框內容，修改後將文本框內容重新賦值給單元格。
源碼：
前台代碼：
. 代碼如下:
<%@ 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">鼠標點擊表格項就可以編輯</th>
</tr>
</thead>
<tbody>
<tr>
<th>學號</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代碼：
. 代碼如下:
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代碼
. 代碼如下:
$(function () {
//找到表格中除了第一個tr以外的所有偶數行
//使用even為了通過tbody tr返回所有tr元素
$("tbody tr:even").css("background-color", "#ece9d8");
//找到所有的學號單元格
var numId = $("tbody td:even");
//給單元格注冊鼠標點擊事件
numId.click(function () {
//找到對應當前鼠標點擊的td，this對應的就是響應了click的那個td
var tdObj = $(this);
//判斷td中是否有文本框
if (tdObj.children("input").length>0) {
return false;
}
//獲取表格中的內容
var text = tdObj.html();
//清空td中的內容
tdObj.html("");
//創建文本框
//去掉文本框的邊框
//設置文本框中字體與表格中的文字大小相同。
//設置文本框的背景顏色與表格的背景顏色一樣
//是文本框的寬度和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);
//文本框插入後先獲得焦點、後選中
inputObj.trigger("focus").trigger("select")
//文本框插入後不能被觸發單擊事件
inputObj.click(function () {
return false;
});
//處理文本框上回車和esc按鍵的操作
inputObj.keyup(function (event) {
//獲取當前按下鍵盤的鍵值
var keycode = event.which;
//處理回車的情況
if (keycode==13) {
//獲取當前文本框中的內容
var inputtext = $(this).val();
//將td中的內容修改為文本框的內容
tdObj.html(inputtext);
}
//處理esc的內容
if (keycode==27) {
//將td中的內容還原成原來的內容
tdObj.html(text);
}
});
});
});
總結：通過這一實例的學習能獲得的知識點：
一、html方面
1.table中可以包含thead和tbody
2.表頭的內容中可以放th中
3.table{}這種寫法稱作標簽選擇器，可以對整個table產生影響。
4.table td{}這種寫法表示table中包含的所有td。
二、jquery方面
$()的括號中可以放4種不同的參數
1.參數直接放function,表示頁面加載完畢：例如上述例子中jquery代碼中的第1行$(function(){})
2.參數可以是css類選擇器，並被包裝成一個jquery對象。例如：上述例子中jquery代碼的第4行$(“tbody tr:even”)
3.參數如果是html文本，可以創建dom節點，並包裝成jquery對象。例如：上述例子中jquery代碼的第27行$("<input type='text'>")
4.參數可以是一個dom對象，這個方法相當於吧dom對象裝換成jquery對象。上述例子中jquery代碼的第11行var tdObj = $(this)
本例子中的jquery對象
1.jquery對象後面加css屬性，可以設置節點的css屬性。例如上述例子中jquery代碼中的第4行$("tbody tr:even").css("background-color", "#ece9d8");
2.jquery對象內容中包含了選擇器對應的dom節點，以數組保存。
3.jquery對象後面加html方法可以設置或獲取節點的html內容。例如上述例子中jquery代碼中的第17行var text = tdObj.html()
4.jquery對象後面加val方法，可以獲取或設置節點的value值。例如上述例子中jquery代碼中第41行var inputtext = $(this).val()
5.jquery對象後面加width方法,可以設置或獲取某個節點的寬度。例如上述例子中jquery代碼中第27行tdObj.width()
6.jquery對象後面加apppendTo方法可以將一個節點追加到另一個節點所有子節點後面。例如上述例子中jquery代碼中第27行appendTo(tdObj)
7.jquery對象後面加trigger方法可以出發某個js事件發生。例如上述例子中jquery代碼中第29行inputObj.trigger("focus").trigger("select")
8.jquery對象後面加children方法可以獲得某個節點的子節點，可以制定參數來限制子節點的內容。例如上述例子中jquery代碼中第13行tdObj.children("input").length
9.如果選擇器返回的jquery對象中包含多個dom節點，在這個對象上注冊類似click事件，所有dom節點都會用於此事件。例如上述例子中jquery代碼中第9行numId.click；