Ajax实现表格中信息不刷新页面进行更新数据

(编辑：jimmy 日期: 2024/11/17 浏览：3 次 )

本文实例为大家分享了Ajax实现表格中的信息进行更新数据，供大家参考，具体内容如下

html:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-3.1.1.js">

css:控制单根边框


/*利用table和tr中的空隙来进行控制间隙的颜色*/
table{
 border: 0px;
 background: #000;
}
tr{
 background: #FFF;
}




js:


//在页面装载的时候进行对td的点击
$(document).ready(function () {
 var tds = $("td");
 tds.click(tdclick);
});
function tdclick() {
  //1将文本的内容保存起来
  var td = $(this);
  var text = td.text();
  //2清空td里面的内容
  td.html("");
  //3建立文本框
  var input = $("<input>");
  //4.设置文本框的值是保存起来的值
  input.attr("value", text);
  //4.5相应回车和键盘事件
  input.keyup(function (event) {
   //判断按键是什么
   var myevent = event || window.event;
   var key = myevent.keyCode;
   if (key == 13) {
    var inputnode = $(this);
    //1.保存文本框的内荣
    var inputtext = inputnode.val();
    //2.清空td里面的内容保存的文本框填充到td中去
    var tdNode = inputnode.parent();
    tdNode.html(inputtext);
    //4.让td重新拥有点击事件
    td.click(tdclick);
   }
  });
  //5将文本框加入到td中
  td.append(input);
  //6为了防止td的点击事件，我们可以移除
  td.unbind("click");
}




以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：ajax实现页面的局部加载
下一篇：Ajax引擎 ajax请求步骤详细代码