主頁(yè) > 知識(shí)庫(kù) > Ajax實(shí)現(xiàn)表格中信息不刷新頁(yè)面進(jìn)行更新數(shù)據(jù)

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

熱門(mén)標(biāo)簽:地圖標(biāo)注與公司業(yè)務(wù)關(guān)系 提高電話機(jī)器人接通率 銷售電銷機(jī)器人詐騙 外呼系統(tǒng)api對(duì)接 荊州智能電銷機(jī)器人 廣西智能外呼系統(tǒng)多少錢(qián) 福建微碼電話機(jī)器人 大學(xué)校門(mén)地圖標(biāo)注 平?jīng)龈叩碌貓D標(biāo)注商戶要收費(fèi)嗎

本文實(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中的空隙來(lái)進(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)容保存起來(lái)
  var td = $(this);
  var text = td.text();
  //2清空td里面的內(nèi)容
  td.html("");
  //3建立文本框
  var input = $("input>");
  //4.設(shè)置文本框的值是保存起來(lái)的值
  input.attr("value", text);
  //4.5相應(yīng)回車和鍵盤(pán)事件
  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 通過(guò)jQuery ajax獲取數(shù)據(jù)實(shí)現(xiàn)更新后重新渲染頁(yè)面的方法
  • Vue2.X 通過(guò)AJAX動(dòng)態(tài)更新數(shù)據(jù)
  • jquery+ajaxform+springboot控件實(shí)現(xiàn)數(shù)據(jù)更新功能
  • 利用jQuery及AJAX技術(shù)定時(shí)更新GridView的某一列數(shù)據(jù)
  • jquery ajax 局部無(wú)刷新更新數(shù)據(jù)的實(shí)現(xiàn)案例
  • Ajax異步無(wú)刷新對(duì)局部數(shù)據(jù)更新
  • ajax頁(yè)面無(wú)刷新 IE下遭遇Ajax緩存導(dǎo)致數(shù)據(jù)不更新的問(wèn)題
  • ajax異步刷新實(shí)現(xiàn)更新數(shù)據(jù)庫(kù)
  • ajax更新數(shù)據(jù)后,jquery、jq失效問(wèn)題

標(biāo)簽:內(nèi)江 衡陽(yáng) 邯鄲 樂(lè)山 婁底 德陽(yáng) 黔東 海南

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《Ajax實(shí)現(xiàn)表格中信息不刷新頁(yè)面進(jìn)行更新數(shù)據(jù)》,本文關(guān)鍵詞  Ajax,實(shí)現(xiàn),表格,中,信息,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《Ajax實(shí)現(xiàn)表格中信息不刷新頁(yè)面進(jìn)行更新數(shù)據(jù)》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于Ajax實(shí)現(xiàn)表格中信息不刷新頁(yè)面進(jìn)行更新數(shù)據(jù)的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章