酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女

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

来源:新浪科技 作者:秩名 人气: 发布时间:2018-11-07
本篇文章主要介绍了Ajax实现表格中信息不刷新页面进行更新数据的方法,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

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


版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:

相关文章

  • $.ajax中contentType: “application/json” 的用法

    $.ajax中contentType: “application/json” 的用法

    具体内容如下所示: $.ajax({ type: httpMethod, cache:false, async:false, contentType: application/json; charset=utf-8, dataType: json,//返回值类型 url: path+url, data:jsonData, success: function(data){ var resultData = 返......
    02-20
  • ajax实现提交时校验表单

    ajax实现提交时校验表单

    方法一: 代码示例: 巧妙设计之处:ajax提交的话,不能够进行校验拦截,设置一个flag来判断,很巧妙的设计之处,故收藏! function inserts(){ var flag = checkForm(); if (flag == false) { return; } $.ajax({ //几个参数需要注意一......
    02-13
  • Ajax实现二级联动菜单教程

    Ajax实现二级联动菜单教程

    index.jsp %@ page language=java pageEncoding=UTF-8%html head title二级菜单联动演示/title script type=text/javascript var req; window.nlad=function() {//页面加载时的函数 } function Change_Select(){//当第一个下拉框的选项发......
    11-27
  • 爬取今日头条Ajax请求的教程

    爬取今日头条Ajax请求的教程

    今天小编给大家介绍爬取今日头条Ajax请求。 网址: https://www.toutiao.com/ 搜索头条 可以得到这个网址: https://www.toutiao.com/search/?keyword=%E8%A1%97%E6%8B%8D 开发者工具查看: 我们在搜索中并没有发现上面的文字,那么我们......
    11-14
  • Ajax报错400的参考解决方法

    Ajax报错400的参考解决方法

    今天小编给大家介绍Ajax报错400的参考解决方法。 Failed to load resource: the server responded with a status of 400 (Bad Request) 报错代码为400的错误的原因:基本上都是前台传的数据格式不正确造成的,但是这个格式如何不正确,就......
    11-14
  • Ajax引擎:ajax请求步骤详细代码教程

    Ajax引擎:ajax请求步骤详细代码教程

    今天小编给大家分享Ajax引擎:ajax请求步骤详细代码教程。 说起AJAX,可能是很多同学在很多地方都看到过,各大招聘网站上对于WEB前端和PHP程序员的技能要求清单中也是必不可少的一项。但是,ajax请求步骤详细代码以及说明却比较少见到 什......
    11-08
  • Ajax实现表格中信息不刷新页面进行更新数据的方法

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

    本篇文章给大家介绍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......
    11-07
  • ajax实现页面的局部加载的方法

    ajax实现页面的局部加载的方法

    今天小编给大家介绍ajax实现页面的局部加载的方法。 点击头部即右上角的链接时,页面会根据相应的链接加载新的内容,显示在下方;在中间区域有3栏,当点击1栏中的链接,2栏中会显现相应的内容,点击2栏中的内容,3栏中的内容又会根据2栏......
    11-05

最新更新