您好,登錄后才能下訂單哦!
這篇文章主要介紹了Ajax怎么實現(xiàn)表格中信息不刷新頁面進(jìn)行更新數(shù)據(jù),具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
具體內(nèi)容如下
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="jslib/jquery-3.1.1.js"></script> <script type="text/javascript" src="jslib/edit.js"></script> <link type="text/css" href="css/edit.css" rel="external nofollow" rel="stylesheet"></head> </head> <body> <table> <tbody> <tr> <td>1111</td> <td>2222</td> </tr> <tr> <td>3333</td> <td>4444</td> </tr> </tbody> </table> </body> </html>
css:控制單根邊框
/*利用table和tr中的空隙來進(jìn)行控制間隙的顏色*/ table{ border: 0px; background: #000; } tr{ background: #FFF; }
js:
//在頁面裝載的時候進(jìn)行對td的點擊 $(document).ready(function () { var tds = $("td"); tds.click(tdclick); }); function tdclick() { //1將文本的內(nèi)容保存起來 var td = $(this); var text = td.text(); //2清空td里面的內(nèi)容 td.html(""); //3建立文本框 var input = $("<input>"); //4.設(shè)置文本框的值是保存起來的值 input.attr("value", text); //4.5相應(yīng)回車和鍵盤事件 input.keyup(function (event) { //判斷按鍵是什么 var myevent = event || window.event; var key = myevent.keyCode; if (key == 13) { var inputnode = $(this); //1.保存文本框的內(nèi)榮 var inputtext = inputnode.val(); //2.清空td里面的內(nèi)容保存的文本框填充到td中去 var tdNode = inputnode.parent(); tdNode.html(inputtext); //4.讓td重新?lián)碛悬c擊事件 td.click(tdclick); } }); //5將文本框加入到td中 td.append(input); //6為了防止td的點擊事件,我們可以移除 td.unbind("click"); }
ajax是一種在無需重新加載整個網(wǎng)頁的情況下,能夠更新部分網(wǎng)頁的技術(shù),可以通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,使網(wǎng)頁實現(xiàn)異步更新。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“Ajax怎么實現(xiàn)表格中信息不刷新頁面進(jìn)行更新數(shù)據(jù)”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。