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");
}