jquery自定義插件開發(fā)之window的實現(xiàn)過程
717
2024-03-06
本文實例講述了jQuery實現(xiàn)可以編輯的表格。分享給大家供大家參考，具體如下：
今天小編主要給大家講解一下，如何利用jQuery+js+css實現(xiàn)表格的編輯。接下來，小編就簡單總結(jié)一下如何實現(xiàn)這個小例子。
第一步：編寫html代碼，代碼如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JQuery實例2：可以編輯的表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://www.gimoo.net/t/1901/js/jquery.js"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1901/js/editTable.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">鼠標(biāo)點擊表格項就可以編輯</th>
</tr>
</thead>
<tbody>
<tr>
<th>學(xué)號</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中可以包含thead和tbody，表頭的內(nèi)容可以放到th中，我們來運行一下，看看我們的效果：
從上面的運行效果來看，我們很容易看出來，這個表格的基本輪廓已經(jīng)顯示出來，但是似乎少了些許味道，接著，我們來設(shè)置一下表格的樣式，我們來編寫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;
}
分析一下上面的代碼，table{}這種寫法稱作為標(biāo)簽選擇器，可以對整個頁面所有的table產(chǎn)生影響；table td{}這種寫法表示的是table中包含的所有td；可以通過broder-collapse：collapse這種方式來使表格中的單元格邊框合并。接著，我們連運行一下，看看運行的效果：
上述的運行效果，已經(jīng)非常接近我們需要實現(xiàn)的效果了，但是還是欠點火候，還是不能都編輯，接著，js里面的代碼，相應(yīng)的，在js中我們也要建立兩個文件，一個jquery一個editTable，鑒于jquery的代碼較多，所以小編已經(jīng)上傳相關(guān)資源，有需要的小伙伴可以下載文末鏈接，接著，我們來編寫ueditTable的代碼，來給整理頁面添加行為能力：
//需要首先通過Javascript來解決內(nèi)容部分奇偶行的背景色不同
//$(document).ready(function(){
//
//});
//簡化的ready寫法
$(function(){
//找到表格的內(nèi)容區(qū)域中所有的奇數(shù)行
//使用even是為了把通過tbody tr返回的所有tr元素中，在數(shù)組里面下標(biāo)是偶數(shù)的元素返回，因為這些元素，實際上才是我們期望的tbody里面的奇數(shù)行
$("tbody tr:even").css("background-color","#ECE9D8");
//我們需要找到所有的學(xué)號單元格
var numTd = $("tbody td:even");
//給這些單元格注冊鼠標(biāo)點擊的事件
numTd.click(function() {
//找到當(dāng)前鼠標(biāo)點擊的td,this對應(yīng)的就是響應(yīng)了click的那個td
var tdObj = $(this);
if (tdObj.children("input").length > 0) {
//當(dāng)前td中input，不執(zhí)行click處理
return false;
}
var text = tdObj.html();
//清空td中的內(nèi)容
tdObj.html("");
//創(chuàng)建一個文本框
//去掉文本框的邊框
//設(shè)置文本框中的文字字體大小是16px
//使文本框的寬度和td的寬度相同
//設(shè)置文本框的背景色
//需要將當(dāng)前td中的內(nèi)容放到文本框中
//將文本框插入到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).appendTo(tdObj);
//是文本框插入之后就被選中
inputObj.trigger("focus").trigger("select");
inputObj.click(function() {
return false;
});
//處理文本框上回車和esc按鍵的操作
inputObj.keyup(function(event){
//獲取當(dāng)前按下鍵盤的鍵值
var keycode = event.which;
//處理回車的情況
if (keycode == 13) {
//獲取當(dāng)當(dāng)前文本框中的內(nèi)容
var inputtext = $(this).val();
//將td的內(nèi)容修改成文本框中的內(nèi)容
tdObj.html(inputtext);
}
//處理esc的情況
if (keycode == 27) {
//將td中的內(nèi)容還原成text
tdObj.html(text);
}
});
});
});
運行效果如下：
完整實例代碼點擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
