一樣的table？不一樣的table(可編輯狀態table)
2024-05-06 14:21:15
供稿：網友
新的一天開始了，生活還要繼續，今天要和大家分享的是不一樣的table，普通的table就用于顯示數據，今天要分享的table不僅僅能顯示數據，還可以對數據進行編輯，當鼠標點擊數據時相應的數據格就變成可編輯的狀態，廢話不多說，進入今天的主題，首先完成HTML頁面：
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQueryProject1</title>
<meta name="author" content="Frank_Ren" />
<link type="text/css" rel="stylesheet" href="css/myCSS.css" />
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" language="JavaScript" src="js/myJSFile.js"></script>
<!-- Date: 2012-09-17 -->
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">鼠標點擊下列內容可以進行編輯</th>
</tr>
</thead>
<tbody id="content">
<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>
沒錯現在它還是一個普通的table，一點樣式都還沒有，為了讓這個table顯得不那么抽象，接下來為它引入CSS樣式
代碼如下:
table{
width:400px;
height: 150px;
}
table, table td, table th{
border:1px solid black;
border-collapse: collapse;
}
table td{
width:50%;
height: 25px;
}
thead th{
background-color:#87CEFA;
}
tbody th{
background-color:#FFFACD;
}
在HTML頁面中可編輯的頁面元素就只有那么幾個，很不幸table并不是其中一個，為了讓table變得可編輯，就要向table中插入可編輯的頁面元素，再用CSS裝飾一下，讓它看起來還是一個普通的table，然而卻具備了可編輯的功能，這就是JS所要完成的功能，JS代碼如下：
代碼如下:
$(function(){
var content;
$("#content tr:odd").css("background-color","#D2B48C");
$("#content tr:even").css("background-color","#C0C0C0");
$("#content td").click(function(){
var clickObj = $(this);
content = clickObj.html();
changeToEdit(clickObj);
});
function changeToEdit(node){
node.html("");
var inputObj = $("<input type='text'/>");
inputObj.css("border","0").css("background-color",node.css("background-color"))
