Ajax實(shí)現(xiàn)表格中信息不刷新頁(yè)面進(jìn)行更新數(shù)據(jù)
更新時(shí)間：2018年10月17日 08:37:43 作者：Grit_ICPC
這篇文章主要為大家詳細(xì)介紹了Ajax實(shí)現(xiàn)表格中的信息不刷新頁(yè)面進(jìn)行更新數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Ajax實(shí)現(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:
//在頁(yè)面裝載的時(shí)候進(jìn)行對(duì)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");
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- bootstrapTable+ajax加載數(shù)據(jù) refresh更新數(shù)據(jù)
- Vue.js 通過jQuery ajax獲取數(shù)據(jù)實(shí)現(xiàn)更新后重新渲染頁(yè)面的方法
- Vue2.X 通過AJAX動(dòng)態(tài)更新數(shù)據(jù)
- jquery+ajaxform+springboot控件實(shí)現(xiàn)數(shù)據(jù)更新功能
- 利用jQuery及AJAX技術(shù)定時(shí)更新GridView的某一列數(shù)據(jù)
- jquery ajax 局部無刷新更新數(shù)據(jù)的實(shí)現(xiàn)案例
- Ajax異步無刷新對(duì)局部數(shù)據(jù)更新
- ajax頁(yè)面無刷新 IE下遭遇Ajax緩存導(dǎo)致數(shù)據(jù)不更新的問題
- ajax異步刷新實(shí)現(xiàn)更新數(shù)據(jù)庫(kù)
- ajax更新數(shù)據(jù)后，jquery、jq失效問題
相關(guān)文章
AJAX跨域請(qǐng)求JSONP獲取JSON數(shù)據(jù)的實(shí)例代碼
Asynchronous JavaScript and XML (Ajax) 是驅(qū)動(dòng)新一代 Web 站點(diǎn)（流行術(shù)語(yǔ)為 Web 2.0 站點(diǎn)）的關(guān)鍵技術(shù)。Ajax 這篇文章主要介紹了AJAX跨域請(qǐng)求JSONP獲取JSON數(shù)據(jù)的實(shí)例代碼,需要的朋友可以參考下2017-02-02
本文主要介紹了ajax實(shí)現(xiàn)登錄功能的示例代碼。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
Ajax返回?cái)?shù)據(jù)之前的loading等待效果
我們通過ajax請(qǐng)求，向后臺(tái)傳遞參數(shù)，然后后臺(tái)經(jīng)過一系列的運(yùn)算之后向前臺(tái)返還數(shù)據(jù)，我希望在等待數(shù)據(jù)成功返還之前可以展示一個(gè)loading.gif圖。接下來通過本文給大家分享Ajax返回?cái)?shù)據(jù)之前的loading等待效果,需要的朋友可以參考下2017-08-08
這篇文章主要為大家詳細(xì)介紹了如何使用AJAX實(shí)現(xiàn)局部刷新功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2017-06-06
如何實(shí)現(xiàn)ajax延時(shí)發(fā)送在空閑之后去發(fā)送ajax請(qǐng)求
關(guān)鍵字搜索的功能，還是比較實(shí)用的，在實(shí)現(xiàn)過程中就需用到ajax延時(shí)發(fā)送，下面有個(gè)不錯(cuò)的示例，有需要的朋友可以參考下2013-12-12
瀏覽器跨域獲取Lrc歌詞數(shù)據(jù)的解決辦法...2007-03-03
AJAX應(yīng)用實(shí)例之檢測(cè)用戶名是否唯一(實(shí)例代碼)
本文通過實(shí)例代碼給大家介紹了AJAX應(yīng)用實(shí)例之檢測(cè)用戶名是否唯一，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了Ajax請(qǐng)求和Filter配合案例解析的,本文給大家介紹的非常詳細(xì)，具有參考借鑒加載，需要的朋友可以參考下2016-12-12
Ajax的原理很簡(jiǎn)單，就是在客戶端創(chuàng)建一個(gè)XMLHttpRequest對(duì)象（用來與服務(wù)器進(jìn)行異步通信，這就是Ajax的核心，其實(shí)我們?cè)缇驮谟卯惒酵ㄐ帕?，只是沒把這項(xiàng)技術(shù)用在網(wǎng)頁(yè)設(shè)計(jì)中而已），為該對(duì)象的onreadystatechange 屬性添加一個(gè)事件，當(dāng)對(duì)象的readyState改變的時(shí)候就會(huì)引發(fā)指定的事件。2008-04-04
Ajax 提交表單數(shù)據(jù)到入庫(kù)的全盤操作流程分享
以下是Ajax 提交表單數(shù)據(jù)到入庫(kù)的全盤操作流程，希望本文對(duì)廣大php開發(fā)者有所幫助，感謝閱讀本文2014-01-01