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

分享到

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

Ajax 来源：新浪科技作者：秩名发布时间：2018-11-07 18:27:42 人浏览

摘要

本篇文章给大家介绍Ajax实现表格中信息不刷新页面进行更新数据的方法。直接上代码： HTML： !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 titleTitle/title script type=text/javascript src=jslib/jquery-3.1.1.js/script script type=text/javascri

本篇文章给大家介绍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");

您可能感兴趣的文章 :

原文链接 :

Tag : 表格(6)Ajax(34)

AJAX原理以及axios、fetch区别

AJAX原理 Ajax的原理简单来说是在用户和服务器之间加了个中间层(AJAX引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，
Ajax实现上传图像功能

最终效果展示 xhr发起请求 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
Ajax的疑难杂症介绍

跨域问题如图所示，这是通过jquery封装的ajax请求了一个本地的php文件（无框架），console提示CORS策略已阻止来自来源的null：请求的资源上不
前端实现滑动按钮AJAX与后端交互的代码

html代码 1 2 3 4 div class=switch-box input id=switchButton type=checkbox class=switch / label for=switchButton/label /div css代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1
AJAX实现省市县三级联动效果

（tips:其实省市县三级联动只需要引入jQuery省市县三级联动插件就可以实现）效果图首先准备两个服务端文件，另一个文件太长，这里就不
AJAX实现指定部分页面刷新效果的代码

需求：点击左边的选项，不需要整个页面刷新，只进行右边页面的刷新。这里需要三个文件 work.html !DOCTYPE htmlhtml lang=zh-CNhead meta charset=UTF
Ajax实现三级联动的代码

一、导入数据表和gson.jar 该表包括了中国所有的
AJAX实现注册验证用户名的代码

功能说明当用户在注册页面输入用户名并且鼠标焦点离开输入框时，到数据表中去验证该用户名是否已经存在，如果存在提示不可用，否则
react axios跨域访问一个或多个域名问题的详解

1.react + axios 跨域访问一个域名配置非常简单，只需要在当前的 package.json 文件里面配置： proxy:http://iot-demo-web-dev.autel.com, //当然，这里是一
$.ajax中contentType: “application/json” 的用法

具体内容如下所示： $.ajax({ type: httpMethod, cache:false, async:false, contentType: application/json; charset=utf-8, dataType: json,//返回值类型 url: path+url, data:j