js實例教程-一樣的table？不一樣的table(可編輯狀態table)_js

上一篇: js實例教程-firefox下jQuery UI ... 下一篇:js實例教程-基於JQuery的多標籤實...

js實例教程-一樣的table？不一樣的table(可編輯狀態table)

发布时间：2018-11-23 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了js實例教程-一樣的table？不一樣的table(可編輯狀態table)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小寶典致力於為廣大程序猿（媛）提供高品質的代碼服務，請大家多多光顧小站，小寶典在此謝過。

首先完成HTML頁面：

代碼如下:

<!DOCTYPE htML PubLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html XMlns="https://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>

</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"))
.css("font-size",node.css("font-size")).css("height","20px")
.css("width",node.css("width")).val(content).appendTo(node)
.get(0).select();
inputObj.click(function(){
return false;
}).keyup(function(event){
var keyvalue = event.which;
if(keyvalue==13){
node.html(node.children("input").val());
}
if(keyvalue==27){
node.html(content);
}
}).blur(function(){
if(node.children("input").val()!=content){
if(confirm("是否保存修改的內容？","Yes","No")){
node.html(node.children("input").val());
}else{
node.html(content);
}
}else{
node.html(content);
}
});
}
});

接下來對這段JS做簡單的分析，全局變量 var content 用於保存編輯之前表格中的內容，有時候用戶對錶格進行編輯了但卻並不想保存編輯后的結果，就需要將表格中的內容還原到編輯之前，所以當鼠標點擊的時候首先要將表格的內容保存起來。

下面這兩句$("#content tr:odd").css("background-color","#D2B48C"); $("#content tr:even").css("background-color","#C0C0C0"); 是讓table具備隔行變色，只是為了增加表格的可視性。var inputObj = $("<input type='text'/>"); 這一句生成一個可編輯的JQuery對象，也就是要插入表格中的可編輯元素，後面那一串.css()方法是給inputObj對象追加CSS樣式，.css()方法不僅可以給某個對象設置CSS樣式還可以獲取某個對象的CSS樣式，JQuery中提供了很多這樣的方法。很多時候JQuery方法執行過後返回回來的還是JQuery對象，所以就出現了inputObj.css().css().css()....這樣的寫法。

appendTo()方法就實現了表格的可編輯性（也可用appendix()），將可編輯元素插入到表格中。.get(0).select()這兩個方法是為了選中inputObj中的內容讓焦點落在可編輯元素上，需要注意的是這兩個方法一定要寫在appendTo()之後，inputObj.click(function(){})這個方法也是必不可少的，刪掉這個方法會有一個很有趣的bug，大家可以試一試。

緊接着的 keyup(function(event){})，可以通過 event.which 的方式獲取鍵盤按下的鍵所對應的鍵值，常用的鍵值有 Enter鍵:13、Esc鍵:27，當用戶按下Enter鍵時，就保存編輯后的內容，並將表格還原成普通表格，當用戶按下Esc鍵時，將表格中的內容還原，也將表格還原成普通表格。

用戶體驗，蘋果的出現讓這個詞更深入人心，這裡也湊下熱鬧。為了提高用戶體驗這裡增加了blur(function(){})方法，當焦點離開可編輯元素時首先判斷表格中的內容是否被改變，如果沒有改變直接將表格及表格中的還原，如果有改變就提示用戶是否保存。

今天的示例基本完工了，如果你將JS代碼放在一個單獨的JS文件中引用，可能會出現一個中文亂碼的bug，不妨動手試一試。謝謝你耐心的讀完本文，希望對你會有所幫助。

首先完成HTML頁面：

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html xmlns="https://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>

</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樣式

. 代碼如下:

$(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"))
.css("font-size",node.css("font-size")).css("height","20px")
.css("width",node.css("width")).val(content).appendTo(node)
.get(0).select();
inputObj.click(function(){
return false;
}).keyup(function(event){
var keyvalue = event.which;
if(keyvalue==13){
node.html(node.children("input").val());
}
if(keyvalue==27){
node.html(content);
}
}).blur(function(){
if(node.children("input").val()!=content){
if(confirm("是否保存修改的內容？","Yes","No")){
node.html(node.children("input").val());
}else{
node.html(content);
}
}else{
node.html(content);
}
});
}
});

覺得可用，就經常來吧！Javascript技巧腳本寶典歡迎評論哦！ js技巧，巧奪天工，精雕玉琢。小寶典獻醜了！

脚本宝典总结

以上是脚本宝典为你收集整理的js實例教程-一樣的table？不一樣的table(可編輯狀態table)全部内容，希望文章能够帮你解决js實例教程-一樣的table？不一樣的table(可編輯狀態table)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

上一篇: js實例教程-firefox下jQuery UI ... 下一篇:js實例教程-基於JQuery的多標籤實...

猜你在找的js相关文章

全站导航更多