最新日韩在线,97久久超碰,精品国产第一页

??? 很久不上來(lái)寫文章了,嘿嘿,最近在做一個(gè)簡(jiǎn)單的新聞發(fā)布系統(tǒng),打算做好了以后出個(gè)視頻的,呵呵,很久不錄視頻了,不知道家里的那破話筒還用不用得..還有那破機(jī)子頂不頂?shù)米“?...唉..一個(gè)月1000塊上下的工作...吃飯去300,坐公交去100,給外婆100,給奶奶100,給老媽100,還有300,要攢到何年何月才能買臺(tái)2G內(nèi)存,開VS08不卡的電腦啊...郁悶....

??? 不說(shuō)這么多了,這回給大家?guī)?lái)的是利用jQuery制作一個(gè)可編輯表格的WEB頁(yè)面,大家應(yīng)該用過(guò)Excel吧,里面的表格是可編輯的,點(diǎn)擊任一個(gè)單元格,可向里面輸入東西,按下回車后確認(rèn),如果是按下Esc鍵后就是取消,單元格中的內(nèi)容會(huì)恢復(fù)到之前狀態(tài).
??? 現(xiàn)在我們要把這個(gè)功能移殖到web頁(yè)面上來(lái),我們先來(lái)理一下思路:

① 點(diǎn)擊單元格后可以輸入,即是td的click事件處理函數(shù)里,讓td的innerHTML的內(nèi)容是一個(gè)input輸入框
② 在input輸入文字后按回車或Esc會(huì)觸發(fā)相應(yīng)的事件,即是在input的***事件中判斷按下的鍵,然后做出相應(yīng)的執(zhí)行,這個(gè)***我們可以初步斷定是keydown、keypress、keyup三種之一,至于用哪種后面再說(shuō).
③ 暫時(shí)想到這么多!

??? 下面來(lái)具體的編寫代碼,首先先把HTML頁(yè)面搭建好,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>序號(hào)</th>
            <th>新聞?lì)悇e</th>
            <th>刪除</th>
        </tr>
        <tr>
            <td>1</td>
            <td class="niu">財(cái)經(jīng)新聞</td>   
            <td>刪除</td> 
        </tr>
        <tr>
            <td>2</td>
            <td class="niu">體育新聞</td>  
            <td>刪除</td>  
        </tr>
        <tr>
            <td>3</td>
            <td class="niu">社會(huì)新聞</td>   
            <td>刪除</td> 
        </tr>
    </table>
</body>
</html>

??? 接下來(lái)先設(shè)置一下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;
}

??? 在這里我們?cè)O(shè)置可點(diǎn)擊修改的只是"新聞?lì)悇e"這一列,所以我們要在這一列上加上個(gè)niu樣式,并給他一個(gè)固定寬度,這樣可去除一些界面上的不協(xié)調(diào)之類的...而且也方便我們用jQuery選擇出這一列,我就直接把JS代碼都貼出來(lái),然后再說(shuō)說(shuō)要注意的問(wèn)題.JS代碼如下:

    
$(function() {
    $("tr").children(".niu").click(function() {
        var tdObj = $(this);
        var souText = tdObj.text();   // 原來(lái)的內(nèi)容
        var input = $("<input type='text' value='" + souText + "' />");
        // 設(shè)置文本框的寬
        input.width(tdObj.width());
        // 設(shè)置文本框的點(diǎn)擊事件
        input.click(function() {
        return false;
        });
        // 設(shè)置文本框的樣式
        input.css({ "border-width": 0 });
        // 將文本框替換當(dāng)前td的內(nèi)容
        tdObj.html(input);
        // 觸發(fā)文本框的focus事件后再觸發(fā)select事件
        input.trigger("focus").trigger("select");
        // 文件框的焦點(diǎn)失去事件, 把文本框中填寫的內(nèi)容變成
        input.blur(function() {
        tdObj.html(input.val());
        // 查找當(dāng)前td的前一個(gè)td中的內(nèi)容, 即當(dāng)前行的序號(hào)
        alert(tdObj.prev().text());
        });
        // 處理文本框中鍵盤按鍵事件, Enter 13確認(rèn),Esc 27取消
        input.keydown(function(event) {
        var keyCode = event.keyCode;
        if (keyCode == 13) {
            // 按下回車
            tdObj.html(input.val());
            // 查找當(dāng)前td的前一個(gè)td中的內(nèi)容, 即當(dāng)前行的序號(hào)
            alert(tdObj.prev().text());
        }
        if (keyCode == 27) {
            // 按下Esc
            tdObj.html(souText);
        }
        });
    });
});

??? 在這里我們通過(guò)jQuery的元素篩選功能,用children找出每一tr行中有.niu樣式的單元格td,然后給td加上click事件,在觸發(fā)的函數(shù)中先保存原來(lái)td中的文本,然后利用html方法把td中的內(nèi)容變成一個(gè)input文本框,隨后設(shè)置了一些input文本框的樣式,以保持界面的美觀,然后給文本框加上blur焦點(diǎn)失去事件,相當(dāng)于回車確認(rèn),把文本框中輸入的內(nèi)容變成單元格td的內(nèi)容,再加上keydown事件,進(jìn)行按鍵處理,在這里我們使用keydown事件,因?yàn)榻?jīng)本人檢測(cè), keypress事件在某些瀏覽器上按鍵并不會(huì)產(chǎn)生按鍵代碼, keyup 好像也是一樣,

??? 之所以說(shuō)好像,因?yàn)樵跍y(cè)試的時(shí)候我的IETester出了問(wèn)題,竟然不給我響應(yīng)回車和Esc,一按就死了,重裝了IETester也還是一樣...
??? 最后要說(shuō)的是jQuery中獲取按鍵代碼可用event.keyCode和event.which這兩種方法,經(jīng)本人檢測(cè),如果使用event.which,在opera瀏覽器中檢測(cè)不到Esc鍵的按鍵代碼,因此在這里采用event.keyCode方式來(lái)獲取.
??? 最最后還要說(shuō)的是我們還得給文本框的click點(diǎn)擊事件返回false,要不然的話你點(diǎn)擊單元格,里面蠻文本框了之后再點(diǎn)擊文本框,觸發(fā)完文本框的click事件后還會(huì)再觸發(fā)文本框所處在的父結(jié)點(diǎn),即單元格的click事件,這樣會(huì)產(chǎn)生意想不到的麻煩.所以要給文本框的click點(diǎn)擊事件返回false就行了.
??? 還有忘了說(shuō)了,在正式項(xiàng)目中用到這個(gè)功能的話,除了要獲取文本框輸入的內(nèi)容,即修改后的內(nèi)容,還得要獲取當(dāng)前行的某一列,即要獲取id,這樣才能通過(guò)唯一值id來(lái)更新數(shù)據(jù)庫(kù)中相應(yīng)的內(nèi)容,在這里通過(guò)prev方法,即當(dāng)前結(jié)點(diǎn)的前一個(gè)兄弟結(jié)點(diǎn)來(lái)獲取.
?? 最最最后還要說(shuō)的一點(diǎn),就是我在做新聞發(fā)布系統(tǒng)的時(shí)候用到了上面的這個(gè)功能,在實(shí)際的操作中想要回車后通過(guò)AJAX方式發(fā)送數(shù)據(jù)還有一點(diǎn)小問(wèn)題,就是如果在當(dāng)前ASPX頁(yè)面中有按鈕的話,按回車了會(huì)讓觸發(fā)ASPX的Page_Load事件,如何解決的話這個(gè)留待視頻里再說(shuō)!!!
?? 上頭有任務(wù)下來(lái)了...開始工作....忽忽悠悠又過(guò)一個(gè)上午....

jQuery實(shí)戰(zhàn)(二)

更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系： 360901061

您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對(duì)您有幫助就好】元

2元

5元

10元

20元

自定義

日韩久久久精品,亚洲精品久久久久久久久久久,亚洲欧美一区二区三区国产精品 ,一区二区福利