262
jQuery製作可以編輯的表格
看了王興魁老師的視頻，模仿做了一個，有感悟，先看代碼：
editTable.css
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: #A3BAE9;
}
editTable.js
$(function () {
// 控製奇偶行的顏色
$("tbody tr:even").css("background-color", "yellow");
// 找到單元格
var tds = $("tbody td");
// 注冊事件
tds.click(function () {
// 當前td對象
var tdObj = $(this);
// 如果已經是文本框了
if (tdObj.children("input").length > 0) {
return false;
}
// 當前td中的內容
var text = tdObj.html();
// 清空td
tdObj.html("");
// 插入一個文本框,並選中裏麵內容
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).appendTo(tdObj).select();
//處理文本框上回車和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中的內容還原成text
tdObj.html(text);
}
});
});
});
editTable.htm
<html>
<head>
<title>可以編輯的表格</title>
<link type="text/css" rel="stylesheet" href="css/editTable.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" 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>000001</td>
<td>張三</td>
</tr>
<tr>
<td>000002</td>
<td>李四</td>
</tr>
<tr>
<td>000003</td>
<td>王五</td>
</tr>
</tbody>
</table>
</body>
</html>
得到的啟示:
1.我們最好把需要經常用到的jQuery對象用一個變量保存起來，方便後麵繼續用。比如像var tds = $("tbody td")。
2.jQuery強大的鏈式操作。
3.利用<thead>和<tbody>可以將表頭和表體區分一下。這樣方便，比如我想操作表體的td而不是表頭的td，var tds = $("tbody td")。
4.th可以在thead的tr中出現也可以在tbody的tr中出現。
最後更新：2017-04-02 18:14:53