这篇文章主要为大家详细介绍了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");
}

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

    无相关信息
最新资讯
渶策资本甘剑平:资本市场没有真正的“冬天”

渶策资本甘剑平:资本市

第十二届创业家年会暨产业加速大会在北京召开,会议主题
皮卡界的iPhone 4?特斯拉电动皮卡很酷但并不完美

皮卡界的iPhone 4?特斯

福特刚在周一用电动SUV Mustang Mach-E向特斯拉发起反
信通院院长刘多:制造业在我国5G应用项目中占比达37%

信通院院长刘多:制造

刘多指出,“5G+工业互联网”重点将聚焦在工业制造、能
Facebook同意配合加州隐私调查 将提交更多文件

Facebook同意配合加州

据外媒报道,据路透社报道,在加州总检察长办公室本月在法
特斯拉火星皮卡Cybertruck发布,马斯克7年夙愿成真

特斯拉火星皮卡Cybert

马斯克正式发布了特斯拉皮卡Cybertruck,这也是特斯拉身
蔚来脑洞大开 申请车辆“自毁系统”专利

蔚来脑洞大开 申请车

据外媒报道,近日,蔚来汽车向美国专利局申请了一项“车辆
最新文章
Ajax原理与应用案例快速入门教程

Ajax原理与应用案例快

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

Ajax提交post请求案例

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

Ajax返回值类型与用法

这篇文章主要介绍了Ajax返回值类型与用法,结合实例形
不使用XMLHttpRequest对象实现Ajax效果的方法小结

不使用XMLHttpRequest

这篇文章主要介绍了不使用XMLHttpRequest对象实现Ajax
关于Ajax跨域问题及解决方案详析

关于Ajax跨域问题及解

这篇文章主要给大家介绍了Ajax跨域问题以及解决方案的
Ajax请求跨域问题解决方案分析

Ajax请求跨域问题解决

这篇文章主要介绍了Ajax请求跨域问题解决方案,结合具