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

來(lái)源：本站原創(chuàng)|時(shí)間：2020-01-11|欄目：AJAX相關(guān)|點(diǎn)擊：次

本文實(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í)有所幫助，也希望大家多多支持我們。

上一篇：Ajax獲取php返回json數(shù)據(jù)動(dòng)態(tài)生成select下拉框的實(shí)例

欄目：AJAX相關(guān)

下一篇：Ajax引擎 ajax請(qǐng)求步驟詳細(xì)代碼

本文標(biāo)題：Ajax實(shí)現(xiàn)表格中信息不刷新頁(yè)面進(jìn)行更新數(shù)據(jù)

本文地址：http://www.jygsgssxh.com/a1/AJAXxiangguan/11293.html

更多AJAX相關(guān)

雷火电竞-中国电竞赛事及体育赛事平台

AJAX相關(guān)

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

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀