这篇文章主要为大家详细介绍了Ajax实现表格中的信息不刷新页面进行更新数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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中的空隙来进行控制间隙的颜色*/
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");
}

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

    无相关信息
最新资讯
当特斯拉的屠刀真实落下

当特斯拉的屠刀真实落

玩儿了命做超长续航,似乎真的已经落伍了?
威马联合创始人陆斌已离职,公司最快年底登陆科创板

威马联合创始人陆斌已

8月5日,有媒体从多位知情人士处独家获悉,威马汽车联合创
拼多多:与邮储银行合作成立直销银行为“假消息”

拼多多:与邮储银行合作

8月5日有自媒体报道称,拼多多将与中国邮政储蓄银行共同
神州优车:以每股3.1港币向北汽转让剩余神州租车股份

神州优车:以每股3.1港

神州优车公告,临时股东大会审议通过了《关于公司对外转
腾讯据称推动虎牙和斗鱼合并 打造百亿美元游戏直播巨头

腾讯据称推动虎牙和斗

这项交易若能成行,将打造一个拥有超过3亿用户、总市值
阿里助小鹏上市、美团力捧理想 巨头为何争抢“上车”?

阿里助小鹏上市、美团

继蔚来、理想之后,小鹏汽车成为新能源汽车下一位IPO的
最新文章
bootstrap select2 动态从后台Ajax动态获取数据的代码

bootstrap select2 动

这篇文章主要介绍了bootstrap select2 动态从后台Ajax
ThinkPHP5 通过ajax插入图片并实时显示(完整代码)

ThinkPHP5 通过ajax插

这篇文章主要介绍了ThinkPHP5 通过ajax插入图片并实时
使用AJAX(包含正则表达式)验证用户登录的步骤

使用AJAX(包含正则表达

这篇文章主要介绍了使用AJAX(包含正则表达式)验证用户登
Ajax原理与应用案例快速入门教程

Ajax原理与应用案例快

这篇文章主要介绍了Ajax原理与应用案例,结合实例形式
Ajax提交post请求案例分析

Ajax提交post请求案例

这篇文章主要介绍了Ajax提交post请求,结合具体案例形
Ajax返回值类型与用法实例分析

Ajax返回值类型与用法

这篇文章主要介绍了Ajax返回值类型与用法,结合实例形