jQuery--編輯表格
阿新 • • 發佈：2017-06-03
bae event enter sheet data- ava 插入 表格 基本操作
表格操作是我們常常遇到的，還記得剛開始學習牛腩新聞公布系統時。跟著視頻進行表格的一些基本操作。而對它的原理與概念全然不懂，不過跟著老師的操作而進行操作。
通過這次學習，對表格的操作有了進一步的了解與掌握。
首先來看一下其效果：（網頁效果：http://192.168.24.71:8010/%E7%BC%96%E8%BE%91%E8%A1%A8%E6%A0%BC/EditTable.html）
實現過程：
HTML代碼：
<span style="font-size:18px;"><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8" />
<title>JQuery實戰2-編輯表格</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>1</td>
<td>王朋波</td>
</tr>
<tr>
<td>2</td>
<td>victor</td>
</tr>
<tr>
<td>3</td>
<td>wangpengbo</td>
</tr>
<tr>
<td>4</td>
<td>wang</td>
</tr>
</tbody>
</table>
</body>
</html></span>
Javascript中的代碼：
<span style="font-size:18px;">//須要通過js來解決內部奇偶行背景色不同
$(function(){
//找到表格內容區域中除了第一個tr以外的全部奇數行
//使用even是為了把通過tbodytr返回的全部元素中，在數組下標是偶數的元素返回
$(‘tbody tr:even‘).css(‘background-color‘,‘#ECE9D8‘);
//須要找到全部的學號單元格
// $(‘tbodytd:even‘).css(‘background-color‘,‘red‘);
var numTd=$(‘tbodytd:even‘);
//給這些表格註冊鼠標單擊的事件
numTd.click(function(){
//找到當鼠標點擊的td。this相應的響應了click的那個id
vartdobj=$(this);
if(tdobj.children(‘input‘).length>0){
//當前td中 input。不運行click處理
returnfalse;
}
vartext=tdobj.html();
//清空td中的內容
tdobj.html(‘‘);
//創建一個文本框
//去掉文本框的邊框
//設置文本框中文字大小為16px
//使文本框的寬度與表格寬度同樣
// 設置文本框背景色
//須要將當前td中的內容放到文本框
//將文本框插入。appendTo方法能夠將一個節點追加到還有一個節點全部子節點的後面
varinputObj=$("<inputtype=‘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.get(0).select();
inputObj.click(function(){
returnfalse; //清除點擊td之後出現一個HTML代碼
})
//處理文本框上回車和esc按鍵操作
inputObj.keyup(function(event){
//獲取當前按下鍵盤的鍵值
varkeycode=event.which;
//處理回車的情況
if(keycode==13){
//獲取當前文本框內容
varinputtext=$(this).val();
//將td中的內容改動成文本框中 的內容
tdobj.html(inputtext);
}
//處理esc的情況
if(keycode==27){
//將td中的內容還原成text
tdobj.html(text);
}
})
})
})</span>Css樣式中的代碼：
<span style="font-size:18px;"> 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;
}</span>
這裏我們須要應用一個JQuery文件。事實上最基本的難點也在這裏。只是，眼下沒有對這個進行深入的研究，我們僅僅須要可以從JQuery中找到我們須要的信息。可以使用其包括的方法實現我們的功能就可以。
在本實例中須要註意的地方是奇偶行顏色的設置上，假設不使用JQuery。相對來說有點困難，過程也會繁瑣。可是在JQuery中已經有了封裝好的方法，even方法是獲取奇數行，而odd是獲取偶數行。
實例小結：
這次主要是對表格table的操作。由實例能夠看出，事實上它也能夠看作標簽選擇器；還有就是JQuery的使用，當中的方法會給我帶來眾多的便利，熟練掌握這些方法是我們這一階段所須要做的。
通過這一個小實例的學習，對js的學習有了進一步的認識。尤其是如今跟著做項目，用到js和JQuery的地方有非常多。初次接觸的時候。感覺無從下手。
只是。經過這些實例之後，不能說掌握。但最起碼已經找到了入手點。所以，學習的同一時候，一定要親自己主動手操作，哪怕是看似簡單的樣例。也要用心。
jQuery--編輯表格