JQuery實戰--能夠編輯的表格
阿新 • • 發佈：2017-07-15
src 總結 black 問題 bsp col ext 背景 meta
JQuery代碼：
以上就是整個實例的代碼了。
今天學習到了一個實例，其名稱為的能夠編輯的表格。
事實上現的效果是：點擊頁面上的單元格，單元格中的內容變成選中狀態，變成能夠輸入的狀態。向單元格中輸入內容，按下回車。單元格保存其改動後的結果，按ESC，單元格的內容還原成原來的內容。
其原理是：點擊單元格的時候。在單元格內加入一個文本框，其大小充滿整個單元格，其內容為單元格中的內容，改動後的內容又一次賦給單元格。
HTML代碼：
<span style="font-size:18px;"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>能夠編輯的表格</title>
<link href="css/EditTable.css" rel="stylesheet" />
<script src="js/Jquery.js"></script>
<script src="js/EditTable.js"></script>
</head>
<body>
<table >
<thead >
<tr>
<th colspan="2"> <!--合並兩列-->
鼠標點擊表格就能夠編輯
</th>
</tr>
</thead>
<tbody >
<tr>
<th>學號</th>
<th>姓名</th>
</tr>
<tr>
<td>0001</td>
<td>張三</td>
</tr>
<tr>
<td>0002</td>
<td>李四</td>
</tr>
<tr>
<td>0003</td>
<td>王五</td>
</tr>
<tr>
<td>0004</td>
<td>趙六</td>
</tr>
</tbody>
</table>
</body>
</html>
</span><span style="font-size:18px;">body {
}
table{
border:1px solid black;
/*修正單元格邊框合並的問題*/
border-collapse:collapse;
width:400px;
}
table td{
border:1px solid black;
width:50%;
}
table th{
border:1px solid black;
width:50%;
}
tbody th{
background-color:blue;
}
</span>JQuery代碼：
<span style="font-size:18px;">//解決奇偶行的背景色不一樣
//$(document).ready(function () {
//});
//簡化的ready寫法
$(function () {
//找到表格的內容區域中除了第一個tr外的全部奇數行
//使用even是為了把tbody tr 返回的全部tr元素中，在數組裏面下標是偶數的元素返回，由於這些元素，實際上才是我們期望的奇數行。奇數行（odd）
$("tbody tr:even").css("background-color", "#999");
//找到全部的學號的單元格
//$("tbody td:even").css("background-color", "red");
var numTd = $("tbody td:even");
//給這些單元格註冊鼠標點擊的事件
numTd.click(function () {
//找到當前鼠標點擊的td，this相應的就是響應了click的那個td
var tdobj = $(this);
if (tdobj.children("input").length > 0) {
//當前td中的input。不運行click處理
return false;
}
var text = tdobj.html();
//創建一個文本框
//去掉文本框的邊框
//設置文本框中的文字的大小
//使文本框的寬度與td寬度同樣
//設置文本框的背景色
//須要將當前td中的內容放到文本框中
var inputobj = $("<input type='text'>").css("border-width", "0").css("font-size", "16px").width(tdobj.width()).css("background-color", tdobj.css("background-color")).val(text);
//清空td中的內容
tdobj.html("");
//將文本庫插入到td中
inputobj.appendTo(tdobj);
//文本框插入後就選中
inputobj.trigger("focus").trigger("select");
inputobj.get(0).select();
inputobj.click(function () {
return false;
});
//處理文本框上的回車和ESC按鍵的操作
inputobj.keyup(function (event) {
//獲取鍵值
var keycode = event.which;
//處理回車的情況
if (keycode == 13) {
//獲取當前文本框的內容
var inputtext = inputobj.val();
tdobj.html(inputtext);
}
if (keycode == 27) {
tdobj.html(text);
}
});
});
});</span>以上就是整個實例的代碼了。
- HTML總結：
- table中能夠包括thead和tbody
- 表頭的內容能夠放在th中
- CSS總結：
- 能夠通過border-collaspse:collapse 這樣的方式來使表格中的單元格的邊框合並。
- 當th上有背景色時，這個th屬於tr上定義的背景色會無效。
- JQuery總結：
- $(function(){})是$(document).ready(function(){})的簡化寫法。
- $("tbody tr:even")能夠返回tbody中全部索引值為偶數的tr節點（：odd 是為奇數的tr節點）。
- function中的this代表運行這個function的對象
- children方法能夠獲得某個節點的子節點。能夠制定參數來限制子節點的內容
- html方法能夠設置或獲取節點的HTML內容
- val方法能夠獲取或設置節點的value值
- appendTo方法能夠將一個節點追加到還有一個節點全部子節點的後面
- trigger方法能夠觸發某個Javascript的事件發生
- Jquery中某個方法的參數function上能夠定義一個event的參數，Jquery會屏蔽瀏覽器的event差異，傳給我們一個可用的event對象
- Jquery的event對象上有一個which的屬性，能夠獲得鍵盤按鍵的鍵值（13=回車，27=ESC）
僅僅有通過不斷地實踐，不斷的總結，編制知識網。和學過的知識聯系起來，那麽我們的收獲才是巨大的。
JQuery實戰--能夠編輯的表格