文章詳情頁
Ajax實(shí)現(xiàn)表格中信息不刷新頁面進(jìn)行更新數(shù)據(jù)
瀏覽：694日期：2022-06-11 11:24:43
本文實(shí)例為大家分享了Ajax實(shí)現(xiàn)表格中的信息進(jìn)行更新數(shù)據(jù)，供大家參考，具體內(nèi)容如下
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中的空隙來進(jìn)行控制間隙的顏色*/
table{
border: 0px;
background: #000;
}
tr{
background: #FFF;
}
js:
//在頁面裝載的時(shí)候進(jìn)行對td的點(diǎn)擊
$(document).ready(function () {
var tds = $("td");
tds.click(tdclick);
});
function tdclick() {
//1將文本的內(nèi)容保存起來
var td = $(this);
var text = td.text();
//2清空td里面的內(nèi)容
td.html("");
//3建立文本框
var input = $("<input>");
//4.設(shè)置文本框的值是保存起來的值
input.attr("value", text);
//4.5相應(yīng)回車和鍵盤事件
input.keyup(function (event) {
//判斷按鍵是什么
var myevent = event || window.event;
var key = myevent.keyCode;
if (key == 13) {
var inputnode = $(this);
//1.保存文本框的內(nèi)榮
var inputtext = inputnode.val();
//2.清空td里面的內(nèi)容保存的文本框填充到td中去
var tdNode = inputnode.parent();
tdNode.html(inputtext);
//4.讓td重新?lián)碛悬c(diǎn)擊事件
td.click(tdclick);
}
});
//5將文本框加入到td中
td.append(input);
//6為了防止td的點(diǎn)擊事件，我們可以移除
td.unbind("click");
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持。
標(biāo)簽：
Ajax
排行榜
網(wǎng)公網(wǎng)安備