??? 很久不上來寫文章了,嘿嘿,最近在做一個簡單的新聞發布系統,打算做好了以后出個視頻的,呵呵,很久不錄視頻了,不知道家里的那破話筒還用不用得..還有那破機子頂不頂得住啊....唉..一個月1000塊上下的工作...吃飯去300,坐公交去100,給外婆100,給奶奶100,給老媽100,還有300,要攢到何年何月才能買臺2G內存,開VS08不卡的電腦啊...郁悶....
??? 不說這么多了,這回給大家帶來的是利用jQuery制作一個可編輯表格的WEB頁面,大家應該用過Excel吧,里面的表格是可編輯的,點擊任一個單元格,可向里面輸入東西,按下回車后確認,如果是按下Esc鍵后就是取消,單元格中的內容會恢復到之前狀態.
??? 現在我們要把這個功能移殖到web頁面上來,我們先來理一下思路:
① 點擊單元格后可以輸入,即是td的click事件處理函數里,讓td的innerHTML的內容是一個input輸入框
② 在input輸入文字后按回車或Esc會觸發相應的事件,即是在input的***事件中判斷按下的鍵,然后做出相應的執行,這個***我們可以初步斷定是keydown、keypress、keyup三種之一,至于用哪種后面再說.
③ 暫時想到這么多!
??? 下面來具體的編寫代碼,首先先把HTML頁面搭建好,HTML代碼如下:
??? 接下來先設置一下CSS樣式,CSS代碼如下:
??? 在這里我們設置可點擊修改的只是"新聞類別"這一列,所以我們要在這一列上加上個niu樣式,并給他一個固定寬度,這樣可去除一些界面上的不協調之類的...而且也方便我們用jQuery選擇出這一列,我就直接把JS代碼都貼出來,然后再說說要注意的問題.JS代碼如下:
??? 在這里我們通過jQuery的元素篩選功能,用children找出每一tr行中有.niu樣式的單元格td,然后給td加上click事件,在觸發的函數中先保存原來td中的文本,然后利用html方法把td中的內容變成一個input文本框,隨后設置了一些input文本框的樣式,以保持界面的美觀,然后給文本框加上blur焦點失去事件,相當于回車確認,把文本框中輸入的內容變成單元格td的內容,再加上keydown事件,進行按鍵處理,在這里我們使用keydown事件,因為經本人檢測, keypress事件在某些瀏覽器上按鍵并不會產生按鍵代碼, keyup 好像 也是一樣,
??? 之所以說好像,因為在測試的時候我的IETester出了問題,竟然不給我響應回車和Esc,一按就死了,重裝了IETester也還是一樣...
??? 最后要說的是jQuery中獲取按鍵代碼可用event.keyCode和event.which這兩種方法,經本人檢測,如果使用event.which,在opera瀏覽器中檢測不到Esc鍵的按鍵代碼,因此在這里采用event.keyCode方式來獲取.
??? 最最后還要說的是我們還得給文本框的click點擊事件返回false,要不然的話你點擊單元格,里面蠻文本框了之后再點擊文本框,觸發完文本框的click事件后還會再觸發文本框所處在的父結點,即單元格的click事件,這樣會產生意想不到的麻煩.所以要給文本框的click點擊事件返回false就行了.
??? 還有忘了說了,在正式項目中用到這個功能的話,除了要獲取文本框輸入的內容,即修改后的內容,還得要獲取當前行的某一列,即要獲取id,這樣才能通過唯一值id來更新數據庫中相應的內容,在這里通過prev方法,即當前結點的前一個兄弟結點來獲取.
?? 最最最后還要說的一點,就是我在做新聞發布系統的時候用到了上面的這個功能,在實際的操作中想要回車后通過AJAX方式發送數據還有一點小問題,就是如果在當前ASPX頁面中有按鈕的話,按回車了會讓觸發ASPX的Page_Load事件,如何解決的話這個留待視頻里再說!!!
?? 上頭有任務下來了...開始工作....忽忽悠悠又過一個上午....
??? 不說這么多了,這回給大家帶來的是利用jQuery制作一個可編輯表格的WEB頁面,大家應該用過Excel吧,里面的表格是可編輯的,點擊任一個單元格,可向里面輸入東西,按下回車后確認,如果是按下Esc鍵后就是取消,單元格中的內容會恢復到之前狀態.
??? 現在我們要把這個功能移殖到web頁面上來,我們先來理一下思路:
① 點擊單元格后可以輸入,即是td的click事件處理函數里,讓td的innerHTML的內容是一個input輸入框
② 在input輸入文字后按回車或Esc會觸發相應的事件,即是在input的***事件中判斷按下的鍵,然后做出相應的執行,這個***我們可以初步斷定是keydown、keypress、keyup三種之一,至于用哪種后面再說.
③ 暫時想到這么多!
??? 下面來具體的編寫代碼,首先先把HTML頁面搭建好,HTML代碼如下:
<!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 runat="server">
<title>可以編輯的表格</title>
<link href="css/edittable.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/edittable.js" type="text/javascript"></script>
</head>
<body>
<table id="category">
<tr>
<th>序號</th>
<th>新聞類別</th>
<th>刪除</th>
</tr>
<tr>
<td>1</td>
<td class="niu">財經新聞</td>
<td>刪除</td>
</tr>
<tr>
<td>2</td>
<td class="niu">體育新聞</td>
<td>刪除</td>
</tr>
<tr>
<td>3</td>
<td class="niu">社會新聞</td>
<td>刪除</td>
</tr>
</table>
</body>
</html>
??? 接下來先設置一下CSS樣式,CSS代碼如下:
* {
margin: 0;
padding: 0;
}
table {
border: 1px solid #7BCB98;
width: 300px;
border-collapse: collapse;
}
th {
border: 1px solid #7BCB98;
background-color: #E9FDF1;
}
td {
border: 1px solid #7BCB98;
text-align:center;
}
.niu {
width: 200px;
}
??? 在這里我們設置可點擊修改的只是"新聞類別"這一列,所以我們要在這一列上加上個niu樣式,并給他一個固定寬度,這樣可去除一些界面上的不協調之類的...而且也方便我們用jQuery選擇出這一列,我就直接把JS代碼都貼出來,然后再說說要注意的問題.JS代碼如下:
$(function() {
$("tr").children(".niu").click(function() {
var tdObj = $(this);
var souText = tdObj.text(); // 原來的內容
var input = $("<input type='text' value='" + souText + "' />");
// 設置文本框的寬
input.width(tdObj.width());
// 設置文本框的點擊事件
input.click(function() {
return false;
});
// 設置文本框的樣式
input.css({ "border-width": 0 });
// 將文本框替換當前td的內容
tdObj.html(input);
// 觸發文本框的focus事件后再觸發select事件
input.trigger("focus").trigger("select");
// 文件框的焦點失去事件, 把文本框中填寫的內容變成
input.blur(function() {
tdObj.html(input.val());
// 查找當前td的前一個td中的內容, 即當前行的序號
alert(tdObj.prev().text());
});
// 處理文本框中鍵盤按鍵事件, Enter 13確認,Esc 27取消
input.keydown(function(event) {
var keyCode = event.keyCode;
if (keyCode == 13) {
// 按下回車
tdObj.html(input.val());
// 查找當前td的前一個td中的內容, 即當前行的序號
alert(tdObj.prev().text());
}
if (keyCode == 27) {
// 按下Esc
tdObj.html(souText);
}
});
});
});
??? 在這里我們通過jQuery的元素篩選功能,用children找出每一tr行中有.niu樣式的單元格td,然后給td加上click事件,在觸發的函數中先保存原來td中的文本,然后利用html方法把td中的內容變成一個input文本框,隨后設置了一些input文本框的樣式,以保持界面的美觀,然后給文本框加上blur焦點失去事件,相當于回車確認,把文本框中輸入的內容變成單元格td的內容,再加上keydown事件,進行按鍵處理,在這里我們使用keydown事件,因為經本人檢測, keypress事件在某些瀏覽器上按鍵并不會產生按鍵代碼, keyup 好像 也是一樣,
??? 之所以說好像,因為在測試的時候我的IETester出了問題,竟然不給我響應回車和Esc,一按就死了,重裝了IETester也還是一樣...
??? 最后要說的是jQuery中獲取按鍵代碼可用event.keyCode和event.which這兩種方法,經本人檢測,如果使用event.which,在opera瀏覽器中檢測不到Esc鍵的按鍵代碼,因此在這里采用event.keyCode方式來獲取.
??? 最最后還要說的是我們還得給文本框的click點擊事件返回false,要不然的話你點擊單元格,里面蠻文本框了之后再點擊文本框,觸發完文本框的click事件后還會再觸發文本框所處在的父結點,即單元格的click事件,這樣會產生意想不到的麻煩.所以要給文本框的click點擊事件返回false就行了.
??? 還有忘了說了,在正式項目中用到這個功能的話,除了要獲取文本框輸入的內容,即修改后的內容,還得要獲取當前行的某一列,即要獲取id,這樣才能通過唯一值id來更新數據庫中相應的內容,在這里通過prev方法,即當前結點的前一個兄弟結點來獲取.
?? 最最最后還要說的一點,就是我在做新聞發布系統的時候用到了上面的這個功能,在實際的操作中想要回車后通過AJAX方式發送數據還有一點小問題,就是如果在當前ASPX頁面中有按鈕的話,按回車了會讓觸發ASPX的Page_Load事件,如何解決的話這個留待視頻里再說!!!
?? 上頭有任務下來了...開始工作....忽忽悠悠又過一個上午....
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
