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

前端  /  管理员 发布于 4年前   484

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

html:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="//article/jslib/jquery-3.1.1.js"></script> <script type="text/javascript" src="//article/jslib/edit.js"></script> <link type="text/css" href="//article/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");}

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


  • 上一条：
    用户名、密码等15个常用的js正则表达式
    下一条：
    Ajax引擎 ajax请求步骤详细代码

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客