欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Ajax實現(xiàn)表格中信息不刷新頁面進(jìn)行更新數(shù)據(jù)

 更新時間：2018年10月17日 08:37:43   作者：Grit_ICPC  
這篇文章主要為大家詳細(xì)介紹了Ajax實現(xiàn)表格中的信息不刷新頁面進(jìn)行更新數(shù)據(jù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了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的點(diǎn)擊
$(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(diǎn)擊事件
    td.click(tdclick);
   }
  });
  //5將文本框加入到td中
  td.append(input);
  //6為了防止td的點(diǎn)擊事件，我們可以移除
  td.unbind("click");
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • AJAX跨域請求JSONP獲取JSON數(shù)據(jù)的實例代碼

    AJAX跨域請求JSONP獲取JSON數(shù)據(jù)的實例代碼

    Asynchronous JavaScript and XML (Ajax) 是驅(qū)動新一代 Web 站點(diǎn)（流行術(shù)語為 Web 2.0 站點(diǎn)）的關(guān)鍵技術(shù)。Ajax 這篇文章主要介紹了AJAX跨域請求JSONP獲取JSON數(shù)據(jù)的實例代碼,需要的朋友可以參考下
    2017-02-02
  • ajax實現(xiàn)登錄功能

    ajax實現(xiàn)登錄功能

    本文主要介紹了ajax實現(xiàn)登錄功能的示例代碼。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-03
  • Ajax返回數(shù)據(jù)之前的loading等待效果

    Ajax返回數(shù)據(jù)之前的loading等待效果

    我們通過ajax請求，向后臺傳遞參數(shù)，然后后臺經(jīng)過一系列的運(yùn)算之后向前臺返還數(shù)據(jù)，我希望在等待數(shù)據(jù)成功返還之前可以展示一個loading.gif圖。接下來通過本文給大家分享Ajax返回數(shù)據(jù)之前的loading等待效果,需要的朋友可以參考下
    2017-08-08
  • AJAX實現(xiàn)局部刷新功能

    AJAX實現(xiàn)局部刷新功能

    這篇文章主要為大家詳細(xì)介紹了如何使用AJAX實現(xiàn)局部刷新功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2017-06-06
  • 如何實現(xiàn)ajax延時發(fā)送在空閑之后去發(fā)送ajax請求

    如何實現(xiàn)ajax延時發(fā)送在空閑之后去發(fā)送ajax請求

    關(guān)鍵字搜索的功能，還是比較實用的，在實現(xiàn)過程中就需用到ajax延時發(fā)送，下面有個不錯的示例，有需要的朋友可以參考下
    2013-12-12
  • 瀏覽器跨域獲取Lrc歌詞數(shù)據(jù)的解決辦法

    瀏覽器跨域獲取Lrc歌詞數(shù)據(jù)的解決辦法

    瀏覽器跨域獲取Lrc歌詞數(shù)據(jù)的解決辦法...
    2007-03-03
  • AJAX應(yīng)用實例之檢測用戶名是否唯一(實例代碼)

    AJAX應(yīng)用實例之檢測用戶名是否唯一(實例代碼)

    本文通過實例代碼給大家介紹了AJAX應(yīng)用實例之檢測用戶名是否唯一，非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2017-09-09
  • Ajax請求和Filter配合案例解析

    Ajax請求和Filter配合案例解析

    這篇文章主要介紹了Ajax請求和Filter配合案例解析的,本文給大家介紹的非常詳細(xì)，具有參考借鑒加載，需要的朋友可以參考下
    2016-12-12
  • 用Ajax讀取xml文件的簡單例子

    用Ajax讀取xml文件的簡單例子

    Ajax的原理很簡單，就是在客戶端創(chuàng)建一個XMLHttpRequest對象（用來與服務(wù)器進(jìn)行異步通信，這就是Ajax的核心，其實我們早就在用異步通信了，只是沒把這項技術(shù)用在網(wǎng)頁設(shè)計中而已），為該對象的onreadystatechange 屬性添加一個事件，當(dāng)對象的readyState改變的時候就會引發(fā)指定的事件。
    2008-04-04
  • Ajax 提交表單數(shù)據(jù)到入庫的全盤操作流程分享

    Ajax 提交表單數(shù)據(jù)到入庫的全盤操作流程分享

    以下是Ajax 提交表單數(shù)據(jù)到入庫的全盤操作流程，希望本文對廣大php開發(fā)者有所幫助，感謝閱讀本文
    2014-01-01

最新評論