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");
} 相关推荐
移动开发与培训 2020-08-16
ReunionIsland 2020-08-16
行吟阁 2020-08-09
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
云中舞步 2020-11-12
杨德龙 2020-11-11
JohnYork 2020-10-16
wangzhaotongalex 2020-09-22
xiaoseyihe 2020-11-16
Crazyshark 2020-11-13
K先生 2020-11-10
思君夜未眠 2020-09-04
点滴技术生活 2020-08-21
MaggieRose 2020-08-19
kevinweijc 2020-08-18
wintershii 2020-08-17
vapaad 2020-08-17