主页 > 知识库 > Ajax实现表格中信息不刷新页面进行更新数据

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

热门标签:服务器配置 科大讯飞语音识别系统 Linux服务器 阿里云 团购网站 银行业务 Mysql连接数设置 电子围栏

本文实例为大家分享了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");
}

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

您可能感兴趣的文章:
  • bootstrapTable+ajax加载数据 refresh更新数据
  • Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
  • Vue2.X 通过AJAX动态更新数据
  • jquery+ajaxform+springboot控件实现数据更新功能
  • 利用jQuery及AJAX技术定时更新GridView的某一列数据
  • jquery ajax 局部无刷新更新数据的实现案例
  • Ajax异步无刷新对局部数据更新
  • ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
  • ajax异步刷新实现更新数据库
  • ajax更新数据后,jquery、jq失效问题

标签:蚌埠 萍乡 衡水 枣庄 衢州 大理 广元 江苏

巨人网络通讯声明:本文标题《Ajax实现表格中信息不刷新页面进行更新数据》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266