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

}

以上是 Ajax实现表格中信息不刷新页面进行更新数据 的全部内容, 来源链接: utcz.com/z/320287.html

回到顶部