您现在的位置： Linux教程網 >> UnixLinux > >> Linux編程 >> Linux編程

jQuery實戰-可以編輯的表格

可以編輯的表格

EditTable.html

Html代碼

<html>
<head>
<title>可以編輯的表格</title>
<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8”>
<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>
<tr>
<td>000004</td>
<td>趙六</td>
</tr>
</tbody>
</table>
</body>
</html>

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

//需要首先通過javascript來解決內容部分奇偶行的背景色不同
// $(document).read(function() {});
$(function() {
//找到表格的內容區域中(除第一個tr以外)的所有奇數行
//使用even是為了把通過tbody tr返回的所有tr元素中，在數組裡面下標是偶數的元素返回，因為這些元素，實際上才是我們期望的tbody裡面的奇數行
$(“tbody tr:even”).css(“background-color”,”ECE9D8”);
// 我們需要找到所有的學號單元格
var numTd = $(“tbody td:even”);
//給這些單元格注冊鼠標點擊的事件
numTd.click(function() {
// 創建一個文本框
var inputObj = $(“<input type=’text’>”)
//去掉文本框的邊框
inputObj.css(“border-width”,”0”);
//設置文本框中的文字字體大小是16px
inputObj.css(“font-size”;”16px”);
// 找到當前鼠標點擊的td,this對應的就是響應了click的那個td
var tdObj = $(this);
//使文本框的寬度和td寬度相同
inputObj.width(tdObj.width());
//設置文本框的背景色
inputObj.css(“background-color”,tdObj.css(“background-color”));
// 需要將當前td中的內容放到文本框中
inputObj.val(tdObj.html());
// 清空td中的內容
tdObj.html(“”);
// 將文本框插入到td中
inputObj.appendTo(tdObj);
……..
});
});

精簡版eidtTable.js

//需要首先通過javascript來解決內容部分奇偶行的背景色不同
// $(document).read(function() {});
$(function() {
//找到表格的內容區域中(除第一個tr以外)的所有奇數行
//使用even是為了把通過tbody tr返回的所有tr元素中，在數組裡面下標是偶數的元素返回，因為這些元素，實際上才是我們期望的tbody裡面的奇數行
$(“tbody tr:even”).css(“background-color”,”ECE9D8”);
// 我們需要找到所有的學號單元格
var numTd = $(“tbody td:even”);
//給這些單元格注冊鼠標點擊的事件
numTd.click(function() {
var tdObj = $(this);
var text = tdObj.html();
tdObj.html(“”);
if(tdObj.children(“input”).length >0) {
return false;
}
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);
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(); //獲取當前文本框中的內容
tdObj.html(inputtext); //將td的內容修改成文本框中的內容
}
//處理esc的情況
if(keycode == 27) {
tdObj.html(text); //將td中的內容還原成text
}
});
});
});

上一篇文章： Struts2中常用常量
下一篇文章： jQuery實戰-級聯下拉框

Linux編程

jQuery中的(function($){...})(jQuery)

jQuery完成帶單選按鈕的表格行高亮顯示